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小時內刪除侵權內容。
相關文章
