Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
InJoyU
vue-element-admin
提交
cb3578e5
V
vue-element-admin
项目概览
InJoyU
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
5
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
cb3578e5
编写于
12月 22, 2017
作者:
P
Pan
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
perf[drag-table]:refine the effect && fixed row-key bug
上级
fe25c4d9
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
27 addition
and
11 deletion
+27
-11
src/views/example/table/dragTable.vue
src/views/example/table/dragTable.vue
+27
-11
未找到文件。
src/views/example/table/dragTable.vue
浏览文件 @
cb3578e5
<
template
>
<div
class=
"app-container calendar-list-container"
>
<el-table
:data=
"list"
v-loading.body=
"listLoading"
border
fit
highlight-current-row
style=
"width: 100%"
>
<!-- Note that row-key is necessary to get a correct row order. -->
<el-table
:data=
"list"
row-key=
"id"
v-loading.body=
"listLoading"
border
fit
highlight-current-row
style=
"width: 100%"
>
<el-table-column
align=
"center"
label=
"序号"
width=
"65"
>
<template
slot-scope=
"scope"
>
...
...
@@ -27,9 +27,9 @@
<
/template
>
<
/el-table-column
>
<
el
-
table
-
column
width
=
"
8
0px
"
label
=
"
重要性
"
>
<
el
-
table
-
column
width
=
"
10
0px
"
label
=
"
重要性
"
>
<
template
slot
-
scope
=
"
scope
"
>
<
svg
-
icon
v
-
for
=
"
n in +scope.row.importance
"
icon
-
class
=
"
star
"
class
=
"
meta-item__icon
"
:
key
=
"
n
"
><
/svg-icon
>
<
svg
-
icon
v
-
for
=
"
n in +scope.row.importance
"
icon
-
class
=
"
star
"
class
=
"
icon-star
"
:
key
=
"
n
"
><
/svg-icon
>
<
/template
>
<
/el-table-column
>
...
...
@@ -45,7 +45,7 @@
<
/template
>
<
/el-table-column
>
<
el
-
table
-
column
align
=
"
center
"
label
=
"
拖拽
"
width
=
"
95
"
>
<
el
-
table
-
column
align
=
"
center
"
label
=
"
拖拽
"
width
=
"
80
"
>
<
template
slot
-
scope
=
"
scope
"
>
<
svg
-
icon
class
=
'
drag-handler
'
icon
-
class
=
"
drag
"
><
/svg-icon
>
<
/template
>
...
...
@@ -53,7 +53,7 @@
<
/el-table
>
<
div
class
=
'
show-d
'
>
默认顺序
&
nbsp
;
{{
old
er
List
}}
<
/div
>
<
div
class
=
'
show-d
'
>
默认顺序
&
nbsp
;
{{
oldList
}}
<
/div
>
<
div
class
=
'
show-d
'
>
拖拽后顺序
{{
newList
}}
<
/div
>
<
/div
>
...
...
@@ -75,7 +75,7 @@ export default {
limit
:
10
}
,
sortable
:
null
,
old
er
List
:
[],
oldList
:
[],
newList
:
[]
}
}
,
...
...
@@ -99,8 +99,8 @@ export default {
this
.
list
=
response
.
data
.
items
this
.
total
=
response
.
data
.
total
this
.
listLoading
=
false
this
.
old
er
List
=
this
.
list
.
map
(
v
=>
v
.
id
)
this
.
newList
=
this
.
old
er
List
.
slice
()
this
.
oldList
=
this
.
list
.
map
(
v
=>
v
.
id
)
this
.
newList
=
this
.
oldList
.
slice
()
this
.
$nextTick
(()
=>
{
this
.
setSort
()
}
)
...
...
@@ -109,7 +109,12 @@ export default {
setSort
()
{
const
el
=
document
.
querySelectorAll
(
'
.el-table__body-wrapper > table > tbody
'
)[
0
]
this
.
sortable
=
Sortable
.
create
(
el
,
{
ghostClass
:
'
sortable-ghost
'
,
// Class name for the drop placeholder,
onEnd
:
evt
=>
{
const
targetRow
=
this
.
list
.
splice
(
evt
.
oldIndex
,
1
)[
0
]
this
.
list
.
splice
(
evt
.
newIndex
,
0
,
targetRow
)
// for show the changes, you can delete in you code
const
tempIndex
=
this
.
newList
.
splice
(
evt
.
oldIndex
,
1
)[
0
]
this
.
newList
.
splice
(
evt
.
newIndex
,
0
,
tempIndex
)
}
...
...
@@ -119,10 +124,21 @@ export default {
}
<
/script
>
<
style
>
.
sortable
-
ghost
{
opacity
:
.
8
;
color
:
#
fff
!
important
;
background
:
#
42
b983
!
important
;
}
<
/style
>
<
style
scoped
>
.
icon
-
star
{
margin
-
right
:
2
px
;
}
.
drag
-
handler
{
width
:
3
0
px
;
height
:
3
0
px
;
width
:
2
0
px
;
height
:
2
0
px
;
cursor
:
pointer
;
}
.
show
-
d
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录