Vue进阶（幺零五）：element表格行列拖拽
element ui 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。
git地址
中文网
Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Ember, Knockout and any CSS library, e.g. Bootstrap.
首先需要安装Sortable.js
npm install sortablejs --save
1
然后引用
import Sortable from ‘sortablejs’
1
需要注意的是element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。
示例代码
{{dropCol}}
{{tableData}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
附 sortable排序保存后，怎么解绑拖拽排序功能
根据文档，有2种方式可以实现拖拽排序解绑，
要么你设置 disabled: true：
https://github.com/RubaXa/Sor…
要么你直接销毁当前的实例：
https://github.com/RubaXa/Sor…
_this.rootDepart.sortableObj = Sortable.create(el); // 销毁排序 _this.rootDepart.sortableObj.destroy();
1
2
3
Vue
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
