SortableJS 实现 Element UI Table行拖拽排序功能

Element UI Table组件基本使用（官方文档）
Sortable.js 官方文档
实现步骤

1. 安装SortableJS

通过npm安装：

1. npm install sortablejs --save

复制代码

或使用国内CDN（推荐）：

1. [/code][size=5]2. 基础拖拽功能实现[/size]
3. 在Vue组件中，通过ref获取Table的body部分，初始化Sortable实例：
4. [code]<template>
5. <el-table
6.   ref="dragTable"
7.   :data="tableData"
8.   row-key="id"
9.   :row-class-name="rowClassName"
10.   border
11.   >
12.   
13. </el-table><el-table
14. <el-table
15.   ref="dragTable"
16.   :data="tableData"
17.   row-key="id"
18.   :row-class-name="rowClassName"
19.   border
20.   >
21.   
22. </el-table><el-table
23.   ref="dragTable"
24.   :data="tableData"
25.   row-key="id"
26.   :row-class-name="rowClassName"
27.   border
28.   >
29.   
30. </el-table>ref="dragTable"
31. <el-table
32.   ref="dragTable"
33.   :data="tableData"
34.   row-key="id"
35.   :row-class-name="rowClassName"
36.   border
37.   >
38.   
39. </el-table><el-table
40.   ref="dragTable"
41.   :data="tableData"
42.   row-key="id"
43.   :row-class-name="rowClassName"
44.   border
45.   >
46.   
47. </el-table>:data="tableData"
48. <el-table
49.   ref="dragTable"
50.   :data="tableData"
51.   row-key="id"
52.   :row-class-name="rowClassName"
53.   border
54.   >
55.   
56. </el-table><el-table
57.   ref="dragTable"
58.   :data="tableData"
59.   row-key="id"
60.   :row-class-name="rowClassName"
61.   border
62.   >
63.   
64. </el-table>row-key="id"
65. <el-table
66.   ref="dragTable"
67.   :data="tableData"
68.   row-key="id"
69.   :row-class-name="rowClassName"
70.   border
71.   >
72.   
73. </el-table><el-table
74.   ref="dragTable"
75.   :data="tableData"
76.   row-key="id"
77.   :row-class-name="rowClassName"
78.   border
79.   >
80.   
81. </el-table>border
82. <el-table
83.   ref="dragTable"
84.   :data="tableData"
85.   row-key="id"
86.   :row-class-name="rowClassName"
87.   border
88.   >
89.   
90. </el-table><el-table
91.   ref="dragTable"
92.   :data="tableData"
93.   row-key="id"
94.   :row-class-name="rowClassName"
95.   border
96.   >
97.   
98. </el-table>>
99. <el-table
100.   ref="dragTable"
101.   :data="tableData"
102.   row-key="id"
103.   :row-class-name="rowClassName"
104.   border
105.   >
106.   
107. </el-table><el-table
108.   ref="dragTable"
109.   :data="tableData"
110.   row-key="id"
111.   :row-class-name="rowClassName"
112.   border
113.   >
114.   
115. </el-table><el-table-column type="index" width="50"></el-table-column>
116. <el-table
117.   ref="dragTable"
118.   :data="tableData"
119.   row-key="id"
120.   :row-class-name="rowClassName"
121.   border
122.   >
123.   
124. </el-table><el-table
125.   ref="dragTable"
126.   :data="tableData"
127.   row-key="id"
128.   :row-class-name="rowClassName"
129.   border
130.   >
131.   
132. </el-table><el-table-column prop="name" label="名称"></el-table-column>
133. <el-table
134.   ref="dragTable"
135.   :data="tableData"
136.   row-key="id"
137.   :row-class-name="rowClassName"
138.   border
139.   >
140.   
141. </el-table><el-table
142.   ref="dragTable"
143.   :data="tableData"
144.   row-key="id"
145.   :row-class-name="rowClassName"
146.   border
147.   >
148.   
149. </el-table><el-table-column prop="order" label="排序"></el-table-column>
150. <el-table
151.   ref="dragTable"
152.   :data="tableData"
153.   row-key="id"
154.   :row-class-name="rowClassName"
155.   border
156.   >
157.   
158. </el-table></el-table>
159. </template>

复制代码

3. 实现原理详解

拖拽排序功能的实现主要分为三个核心步骤：

3.1 初始化Sortable实例

在Vue的mounted生命周期钩子中，通过Table组件的ref获取到表格的DOM元素，并找到包含行数据的tbody元素。SortableJS通过监听这个tbody元素来实现拖拽功能。
关键代码位于packages/table/src/table.vue的渲染结构中，表格主体使用了.el-table__body-wrapper类包裹，其中的tbody就是我们需要监听的目标元素。
3.2 拖拽事件处理

SortableJS提供了丰富的事件回调，我们主要使用onEnd事件在拖拽结束后触发数据更新。拖拽过程中，SortableJS会自动处理DOM元素的位置变化，我们只需要关注数据层面的调整。
3.3 数据排序与同步

当拖拽结束后，通过oldIndex和newIndex确定数据移动的方向和距离，然后调整数据数组中元素的顺序，并更新排序号。最后可以选择将新的排序结果同步到后端数据库。
4. 高级功能扩展

4.1 禁用特定行拖拽

有时我们需要禁止某些行的拖拽功能，可以通过Sortable的filter配置实现：

1. initSortable() {
2. <el-table
3.   ref="dragTable"
4.   :data="tableData"
5.   row-key="id"
6.   :row-class-name="rowClassName"
7.   border
8.   >
9.   
10. </el-table>const tbody = this.$refs.dragTable.$el.querySelector('.el-table__body-wrapper tbody')
11. <el-table
12.   ref="dragTable"
13.   :data="tableData"
14.   row-key="id"
15.   :row-class-name="rowClassName"
16.   border
17.   >
18.   
19. </el-table>
20. <el-table
21.   ref="dragTable"
22.   :data="tableData"
23.   row-key="id"
24.   :row-class-name="rowClassName"
25.   border
26.   >
27.   
28. </el-table>this.sortable = new Sortable(tbody, {
29. <el-table
30.   ref="dragTable"
31.   :data="tableData"
32.   row-key="id"
33.   :row-class-name="rowClassName"
34.   border
35.   >
36.   
37. </el-table><el-table
38.   ref="dragTable"
39.   :data="tableData"
40.   row-key="id"
41.   :row-class-name="rowClassName"
42.   border
43.   >
44.   
45. </el-table>animation: 150,
46. <el-table
47.   ref="dragTable"
48.   :data="tableData"
49.   row-key="id"
50.   :row-class-name="rowClassName"
51.   border
52.   >
53.   
54. </el-table><el-table
55.   ref="dragTable"
56.   :data="tableData"
57.   row-key="id"
58.   :row-class-name="rowClassName"
59.   border
60.   >
61.   
62. </el-table>// 过滤不可拖拽的行
63. <el-table
64.   ref="dragTable"
65.   :data="tableData"
66.   row-key="id"
67.   :row-class-name="rowClassName"
68.   border
69.   >
70.   
71. </el-table><el-table
72.   ref="dragTable"
73.   :data="tableData"
74.   row-key="id"
75.   :row-class-name="rowClassName"
76.   border
77.   >
78.   
79. </el-table>filter: '.no-drag',
80. <el-table
81.   ref="dragTable"
82.   :data="tableData"
83.   row-key="id"
84.   :row-class-name="rowClassName"
85.   border
86.   >
87.   
88. </el-table><el-table
89.   ref="dragTable"
90.   :data="tableData"
91.   row-key="id"
92.   :row-class-name="rowClassName"
93.   border
94.   >
95.   
96. </el-table>// 拖拽结束后的回调
97. <el-table
98.   ref="dragTable"
99.   :data="tableData"
100.   row-key="id"
101.   :row-class-name="rowClassName"
102.   border
103.   >
104.   
105. </el-table><el-table
106.   ref="dragTable"
107.   :data="tableData"
108.   row-key="id"
109.   :row-class-name="rowClassName"
110.   border
111.   >
112.   
113. </el-table>onEnd: (evt) => {
114. <el-table
115.   ref="dragTable"
116.   :data="tableData"
117.   row-key="id"
118.   :row-class-name="rowClassName"
119.   border
120.   >
121.   
122. </el-table><el-table
123.   ref="dragTable"
124.   :data="tableData"
125.   row-key="id"
126.   :row-class-name="rowClassName"
127.   border
128.   >
129.   
130. </el-table><el-table
131.   ref="dragTable"
132.   :data="tableData"
133.   row-key="id"
134.   :row-class-name="rowClassName"
135.   border
136.   >
137.   
138. </el-table>this.handleDataSort(evt.oldIndex, evt.newIndex)
139. <el-table
140.   ref="dragTable"
141.   :data="tableData"
142.   row-key="id"
143.   :row-class-name="rowClassName"
144.   border
145.   >
146.   
147. </el-table><el-table
148.   ref="dragTable"
149.   :data="tableData"
150.   row-key="id"
151.   :row-class-name="rowClassName"
152.   border
153.   >
154.   
155. </el-table>}
156. <el-table
157.   ref="dragTable"
158.   :data="tableData"
159.   row-key="id"
160.   :row-class-name="rowClassName"
161.   border
162.   >
163.   
164. </el-table>})
165. }

复制代码

然后在Table组件中为特定行添加no-drag类：

1. <el-table
2.   ref="dragTable"
3.   :data="tableData"
4.   row-key="id"
5.   :row-class-name="rowClassName"
6.   border
7.   >
8.   
9. </el-table>

复制代码

1. methods: {<el-table
2.   ref="dragTable"
3.   :data="tableData"
4.   row-key="id"
5.   :row-class-name="rowClassName"
6.   border
7.   >
8.   
9. </el-table>rowClassName({row}) {<el-table
10.   ref="dragTable"
11.   :data="tableData"
12.   row-key="id"
13.   :row-class-name="rowClassName"
14.   border
15.   >
16.   
17. </el-table><el-table
18.   ref="dragTable"
19.   :data="tableData"
20.   row-key="id"
21.   :row-class-name="rowClassName"
22.   border
23.   >
24.   
25. </el-table>// 对id为2的行禁用拖拽<el-table
26.   ref="dragTable"
27.   :data="tableData"
28.   row-key="id"
29.   :row-class-name="rowClassName"
30.   border
31.   >
32.   
33. </el-table><el-table
34.   ref="dragTable"
35.   :data="tableData"
36.   row-key="id"
37.   :row-class-name="rowClassName"
38.   border
39.   >
40.   
41. </el-table>return row.id === 2 ? 'no-drag' : ''<el-table
42.   ref="dragTable"
43.   :data="tableData"
44.   row-key="id"
45.   :row-class-name="rowClassName"
46.   border
47.   >
48.   
49. </el-table>}}

复制代码

4.2 拖拽时样式自定义

通过CSS可以自定义拖拽过程中的样式：

1. /* 拖拽过程中的行样式 */.el-table__body tr.sortable-ghost {<el-table
2.   ref="dragTable"
3.   :data="tableData"
4.   row-key="id"
5.   :row-class-name="rowClassName"
6.   border
7.   >
8.   
9. </el-table>opacity: 0.8;<el-table
10.   ref="dragTable"
11.   :data="tableData"
12.   row-key="id"
13.   :row-class-name="rowClassName"
14.   border
15.   >
16.   
17. </el-table>background-color: #f5f5f5;} /* 拖拽时的占位符样式 */.el-table__body tr.sortable-placeholder {<el-table
18.   ref="dragTable"
19.   :data="tableData"
20.   row-key="id"
21.   :row-class-name="rowClassName"
22.   border
23.   >
24.   
25. </el-table>background-color: #e9f7ef;<el-table
26.   ref="dragTable"
27.   :data="tableData"
28.   row-key="id"
29.   :row-class-name="rowClassName"
30.   border
31.   >
32.   
33. </el-table>border: 1px dashed #409eff;} /* 禁止拖拽的行样式 */.el-table__body tr.no-drag {<el-table
34.   ref="dragTable"
35.   :data="tableData"
36.   row-key="id"
37.   :row-class-name="rowClassName"
38.   border
39.   >
40.   
41. </el-table>opacity: 0.6;<el-table
42.   ref="dragTable"
43.   :data="tableData"
44.   row-key="id"
45.   :row-class-name="rowClassName"
46.   border
47.   >
48.   
49. </el-table>cursor: not-allowed;}

复制代码

4.3 结合后端实现持久化

在实际应用中，我们需要将排序结果保存到后端，实现数据持久化：

1. methods: {<el-table
2.   ref="dragTable"
3.   :data="tableData"
4.   row-key="id"
5.   :row-class-name="rowClassName"
6.   border
7.   >
8.   
9. </el-table>async handleDataSort(oldIndex, newIndex) {<el-table
10.   ref="dragTable"
11.   :data="tableData"
12.   row-key="id"
13.   :row-class-name="rowClassName"
14.   border
15.   >
16.   
17. </el-table><el-table
18.   ref="dragTable"
19.   :data="tableData"
20.   row-key="id"
21.   :row-class-name="rowClassName"
22.   border
23.   >
24.   
25. </el-table>// 处理数据排序（同上）<el-table
26.   ref="dragTable"
27.   :data="tableData"
28.   row-key="id"
29.   :row-class-name="rowClassName"
30.   border
31.   >
32.   
33. </el-table><el-table
34.   ref="dragTable"
35.   :data="tableData"
36.   row-key="id"
37.   :row-class-name="rowClassName"
38.   border
39.   >
40.   
41. </el-table>// ...<el-table
42.   ref="dragTable"
43.   :data="tableData"
44.   row-key="id"
45.   :row-class-name="rowClassName"
46.   border
47.   >
48.   
49. </el-table><el-table
50.   ref="dragTable"
51.   :data="tableData"
52.   row-key="id"
53.   :row-class-name="rowClassName"
54.   border
55.   >
56.   
57. </el-table><el-table
58.   ref="dragTable"
59.   :data="tableData"
60.   row-key="id"
61.   :row-class-name="rowClassName"
62.   border
63.   >
64.   
65. </el-table><el-table
66.   ref="dragTable"
67.   :data="tableData"
68.   row-key="id"
69.   :row-class-name="rowClassName"
70.   border
71.   >
72.   
73. </el-table>// 保存到后端<el-table
74.   ref="dragTable"
75.   :data="tableData"
76.   row-key="id"
77.   :row-class-name="rowClassName"
78.   border
79.   >
80.   
81. </el-table><el-table
82.   ref="dragTable"
83.   :data="tableData"
84.   row-key="id"
85.   :row-class-name="rowClassName"
86.   border
87.   >
88.   
89. </el-table>try {<el-table
90.   ref="dragTable"
91.   :data="tableData"
92.   row-key="id"
93.   :row-class-name="rowClassName"
94.   border
95.   >
96.   
97. </el-table><el-table
98.   ref="dragTable"
99.   :data="tableData"
100.   row-key="id"
101.   :row-class-name="rowClassName"
102.   border
103.   >
104.   
105. </el-table><el-table
106.   ref="dragTable"
107.   :data="tableData"
108.   row-key="id"
109.   :row-class-name="rowClassName"
110.   border
111.   >
112.   
113. </el-table>await this.$api.saveSortOrder(newArray.map(item => ({<el-table
114.   ref="dragTable"
115.   :data="tableData"
116.   row-key="id"
117.   :row-class-name="rowClassName"
118.   border
119.   >
120.   
121. </el-table><el-table
122.   ref="dragTable"
123.   :data="tableData"
124.   row-key="id"
125.   :row-class-name="rowClassName"
126.   border
127.   >
128.   
129. </el-table><el-table
130.   ref="dragTable"
131.   :data="tableData"
132.   row-key="id"
133.   :row-class-name="rowClassName"
134.   border
135.   >
136.   
137. </el-table><el-table
138.   ref="dragTable"
139.   :data="tableData"
140.   row-key="id"
141.   :row-class-name="rowClassName"
142.   border
143.   >
144.   
145. </el-table>id: item.id,<el-table
146.   ref="dragTable"
147.   :data="tableData"
148.   row-key="id"
149.   :row-class-name="rowClassName"
150.   border
151.   >
152.   
153. </el-table><el-table
154.   ref="dragTable"
155.   :data="tableData"
156.   row-key="id"
157.   :row-class-name="rowClassName"
158.   border
159.   >
160.   
161. </el-table><el-table
162.   ref="dragTable"
163.   :data="tableData"
164.   row-key="id"
165.   :row-class-name="rowClassName"
166.   border
167.   >
168.   
169. </el-table><el-table
170.   ref="dragTable"
171.   :data="tableData"
172.   row-key="id"
173.   :row-class-name="rowClassName"
174.   border
175.   >
176.   
177. </el-table>order: item.order<el-table
178.   ref="dragTable"
179.   :data="tableData"
180.   row-key="id"
181.   :row-class-name="rowClassName"
182.   border
183.   >
184.   
185. </el-table><el-table
186.   ref="dragTable"
187.   :data="tableData"
188.   row-key="id"
189.   :row-class-name="rowClassName"
190.   border
191.   >
192.   
193. </el-table><el-table
194.   ref="dragTable"
195.   :data="tableData"
196.   row-key="id"
197.   :row-class-name="rowClassName"
198.   border
199.   >
200.   
201. </el-table>})))<el-table
202.   ref="dragTable"
203.   :data="tableData"
204.   row-key="id"
205.   :row-class-name="rowClassName"
206.   border
207.   >
208.   
209. </el-table><el-table
210.   ref="dragTable"
211.   :data="tableData"
212.   row-key="id"
213.   :row-class-name="rowClassName"
214.   border
215.   >
216.   
217. </el-table><el-table
218.   ref="dragTable"
219.   :data="tableData"
220.   row-key="id"
221.   :row-class-name="rowClassName"
222.   border
223.   >
224.   
225. </el-table>this.$message.success('排序已保存')<el-table
226.   ref="dragTable"
227.   :data="tableData"
228.   row-key="id"
229.   :row-class-name="rowClassName"
230.   border
231.   >
232.   
233. </el-table><el-table
234.   ref="dragTable"
235.   :data="tableData"
236.   row-key="id"
237.   :row-class-name="rowClassName"
238.   border
239.   >
240.   
241. </el-table>} catch (error) {<el-table
242.   ref="dragTable"
243.   :data="tableData"
244.   row-key="id"
245.   :row-class-name="rowClassName"
246.   border
247.   >
248.   
249. </el-table><el-table
250.   ref="dragTable"
251.   :data="tableData"
252.   row-key="id"
253.   :row-class-name="rowClassName"
254.   border
255.   >
256.   
257. </el-table><el-table
258.   ref="dragTable"
259.   :data="tableData"
260.   row-key="id"
261.   :row-class-name="rowClassName"
262.   border
263.   >
264.   
265. </el-table>this.$message.error('保存失败，请重试')<el-table
266.   ref="dragTable"
267.   :data="tableData"
268.   row-key="id"
269.   :row-class-name="rowClassName"
270.   border
271.   >
272.   
273. </el-table><el-table
274.   ref="dragTable"
275.   :data="tableData"
276.   row-key="id"
277.   :row-class-name="rowClassName"
278.   border
279.   >
280.   
281. </el-table><el-table
282.   ref="dragTable"
283.   :data="tableData"
284.   row-key="id"
285.   :row-class-name="rowClassName"
286.   border
287.   >
288.   
289. </el-table>// 保存失败时恢复原排序<el-table
290.   ref="dragTable"
291.   :data="tableData"
292.   row-key="id"
293.   :row-class-name="rowClassName"
294.   border
295.   >
296.   
297. </el-table><el-table
298.   ref="dragTable"
299.   :data="tableData"
300.   row-key="id"
301.   :row-class-name="rowClassName"
302.   border
303.   >
304.   
305. </el-table><el-table
306.   ref="dragTable"
307.   :data="tableData"
308.   row-key="id"
309.   :row-class-name="rowClassName"
310.   border
311.   >
312.   
313. </el-table>this.tableData = [...this.originalData]<el-table
314.   ref="dragTable"
315.   :data="tableData"
316.   row-key="id"
317.   :row-class-name="rowClassName"
318.   border
319.   >
320.   
321. </el-table><el-table
322.   ref="dragTable"
323.   :data="tableData"
324.   row-key="id"
325.   :row-class-name="rowClassName"
326.   border
327.   >
328.   
329. </el-table>}<el-table
330.   ref="dragTable"
331.   :data="tableData"
332.   row-key="id"
333.   :row-class-name="rowClassName"
334.   border
335.   >
336.   
337. </el-table>}}

复制代码

5. 性能优化建议

对于数据量较大的表格，建议添加以下优化措施：

• 虚拟滚动：结合Element UI的InfiniteScroll（packages/infinite-scroll）实现虚拟滚动，只渲染可见区域的行。
  
• 节流处理：如果需要在拖拽过程中实时更新某些数据，可以对更新函数进行节流处理：
  

1. import { throttle } from 'throttle-debounce' // 在methods中updateDuringDrag: throttle(100, function(row, position) {<el-table
2.   ref="dragTable"
3.   :data="tableData"
4.   row-key="id"
5.   :row-class-name="rowClassName"
6.   border
7.   >
8.   
9. </el-table>// 实时更新逻辑})

复制代码

• 禁用不必要的动画：对于数据量超过100行的表格，可以考虑关闭Sortable的animation选项以提高性能。
  

6. 常见问题解决方案

6.1 拖拽后表格行高度异常

这通常是由于Table组件的高度计算问题导致的，可以在数据更新后调用Table的doLayout方法重新计算布局：

1. this.$nextTick(() => {<el-table
2.   ref="dragTable"
3.   :data="tableData"
4.   row-key="id"
5.   :row-class-name="rowClassName"
6.   border
7.   >
8.   
9. </el-table>this.$refs.dragTable.doLayout()})

复制代码

相关代码位于packages/table/src/table.vue的doLayout方法：

1. doLayout() {<el-table
2.   ref="dragTable"
3.   :data="tableData"
4.   row-key="id"
5.   :row-class-name="rowClassName"
6.   border
7.   >
8.   
9. </el-table>if (this.shouldUpdateHeight) {<el-table
10.   ref="dragTable"
11.   :data="tableData"
12.   row-key="id"
13.   :row-class-name="rowClassName"
14.   border
15.   >
16.   
17. </el-table><el-table
18.   ref="dragTable"
19.   :data="tableData"
20.   row-key="id"
21.   :row-class-name="rowClassName"
22.   border
23.   >
24.   
25. </el-table>this.layout.updateElsHeight();<el-table
26.   ref="dragTable"
27.   :data="tableData"
28.   row-key="id"
29.   :row-class-name="rowClassName"
30.   border
31.   >
32.   
33. </el-table>}<el-table
34.   ref="dragTable"
35.   :data="tableData"
36.   row-key="id"
37.   :row-class-name="rowClassName"
38.   border
39.   >
40.   
41. </el-table>this.layout.updateColumnsWidth();}

复制代码

6.2 固定列（fixed）拖拽问题

当表格使用了fixed列时，拖拽可能会出现视觉错位。解决方案是同时监听固定列和主表格的拖拽事件：

1. initSortable() {<el-table
2.   ref="dragTable"
3.   :data="tableData"
4.   row-key="id"
5.   :row-class-name="rowClassName"
6.   border
7.   >
8.   
9. </el-table>// 主表格tbody<el-table
10.   ref="dragTable"
11.   :data="tableData"
12.   row-key="id"
13.   :row-class-name="rowClassName"
14.   border
15.   >
16.   
17. </el-table>const mainTbody = this.$refs.dragTable.$el.querySelector('.el-table__body-wrapper tbody')<el-table
18.   ref="dragTable"
19.   :data="tableData"
20.   row-key="id"
21.   :row-class-name="rowClassName"
22.   border
23.   >
24.   
25. </el-table>// 左侧固定列tbody<el-table
26.   ref="dragTable"
27.   :data="tableData"
28.   row-key="id"
29.   :row-class-name="rowClassName"
30.   border
31.   >
32.   
33. </el-table>const fixedLeftTbody = this.$refs.dragTable.$el.querySelector('.el-table__fixed-body-wrapper tbody')<el-table
34.   ref="dragTable"
35.   :data="tableData"
36.   row-key="id"
37.   :row-class-name="rowClassName"
38.   border
39.   >
40.   
41. </el-table>// 右侧固定列tbody<el-table
42.   ref="dragTable"
43.   :data="tableData"
44.   row-key="id"
45.   :row-class-name="rowClassName"
46.   border
47.   >
48.   
49. </el-table>const fixedRightTbody = this.$refs.dragTable.$el.querySelector('.el-table__fixed-right-body-wrapper tbody')<el-table
50.   ref="dragTable"
51.   :data="tableData"
52.   row-key="id"
53.   :row-class-name="rowClassName"
54.   border
55.   >
56.   
57. </el-table><el-table
58.   ref="dragTable"
59.   :data="tableData"
60.   row-key="id"
61.   :row-class-name="rowClassName"
62.   border
63.   >
64.   
65. </el-table>// 为三个tbody都初始化Sortable<el-table
66.   ref="dragTable"
67.   :data="tableData"
68.   row-key="id"
69.   :row-class-name="rowClassName"
70.   border
71.   >
72.   
73. </el-table>[mainTbody, fixedLeftTbody, fixedRightTbody].forEach(tbody => {<el-table
74.   ref="dragTable"
75.   :data="tableData"
76.   row-key="id"
77.   :row-class-name="rowClassName"
78.   border
79.   >
80.   
81. </el-table><el-table
82.   ref="dragTable"
83.   :data="tableData"
84.   row-key="id"
85.   :row-class-name="rowClassName"
86.   border
87.   >
88.   
89. </el-table>if (tbody) {<el-table
90.   ref="dragTable"
91.   :data="tableData"
92.   row-key="id"
93.   :row-class-name="rowClassName"
94.   border
95.   >
96.   
97. </el-table><el-table
98.   ref="dragTable"
99.   :data="tableData"
100.   row-key="id"
101.   :row-class-name="rowClassName"
102.   border
103.   >
104.   
105. </el-table><el-table
106.   ref="dragTable"
107.   :data="tableData"
108.   row-key="id"
109.   :row-class-name="rowClassName"
110.   border
111.   >
112.   
113. </el-table>new Sortable(tbody, {<el-table
114.   ref="dragTable"
115.   :data="tableData"
116.   row-key="id"
117.   :row-class-name="rowClassName"
118.   border
119.   >
120.   
121. </el-table><el-table
122.   ref="dragTable"
123.   :data="tableData"
124.   row-key="id"
125.   :row-class-name="rowClassName"
126.   border
127.   >
128.   
129. </el-table><el-table
130.   ref="dragTable"
131.   :data="tableData"
132.   row-key="id"
133.   :row-class-name="rowClassName"
134.   border
135.   >
136.   
137. </el-table><el-table
138.   ref="dragTable"
139.   :data="tableData"
140.   row-key="id"
141.   :row-class-name="rowClassName"
142.   border
143.   >
144.   
145. </el-table>// 配置同上，但只在主表格上处理数据更新<el-table
146.   ref="dragTable"
147.   :data="tableData"
148.   row-key="id"
149.   :row-class-name="rowClassName"
150.   border
151.   >
152.   
153. </el-table><el-table
154.   ref="dragTable"
155.   :data="tableData"
156.   row-key="id"
157.   :row-class-name="rowClassName"
158.   border
159.   >
160.   
161. </el-table><el-table
162.   ref="dragTable"
163.   :data="tableData"
164.   row-key="id"
165.   :row-class-name="rowClassName"
166.   border
167.   >
168.   
169. </el-table><el-table
170.   ref="dragTable"
171.   :data="tableData"
172.   row-key="id"
173.   :row-class-name="rowClassName"
174.   border
175.   >
176.   
177. </el-table>onEnd: (evt) => {<el-table
178.   ref="dragTable"
179.   :data="tableData"
180.   row-key="id"
181.   :row-class-name="rowClassName"
182.   border
183.   >
184.   
185. </el-table><el-table
186.   ref="dragTable"
187.   :data="tableData"
188.   row-key="id"
189.   :row-class-name="rowClassName"
190.   border
191.   >
192.   
193. </el-table><el-table
194.   ref="dragTable"
195.   :data="tableData"
196.   row-key="id"
197.   :row-class-name="rowClassName"
198.   border
199.   >
200.   
201. </el-table><el-table
202.   ref="dragTable"
203.   :data="tableData"
204.   row-key="id"
205.   :row-class-name="rowClassName"
206.   border
207.   >
208.   
209. </el-table><el-table
210.   ref="dragTable"
211.   :data="tableData"
212.   row-key="id"
213.   :row-class-name="rowClassName"
214.   border
215.   >
216.   
217. </el-table>if (tbody === mainTbody) {<el-table
218.   ref="dragTable"
219.   :data="tableData"
220.   row-key="id"
221.   :row-class-name="rowClassName"
222.   border
223.   >
224.   
225. </el-table><el-table
226.   ref="dragTable"
227.   :data="tableData"
228.   row-key="id"
229.   :row-class-name="rowClassName"
230.   border
231.   >
232.   
233. </el-table><el-table
234.   ref="dragTable"
235.   :data="tableData"
236.   row-key="id"
237.   :row-class-name="rowClassName"
238.   border
239.   >
240.   
241. </el-table><el-table
242.   ref="dragTable"
243.   :data="tableData"
244.   row-key="id"
245.   :row-class-name="rowClassName"
246.   border
247.   >
248.   
249. </el-table><el-table
250.   ref="dragTable"
251.   :data="tableData"
252.   row-key="id"
253.   :row-class-name="rowClassName"
254.   border
255.   >
256.   
257. </el-table><el-table
258.   ref="dragTable"
259.   :data="tableData"
260.   row-key="id"
261.   :row-class-name="rowClassName"
262.   border
263.   >
264.   
265. </el-table>this.handleDataSort(evt.oldIndex, evt.newIndex)<el-table
266.   ref="dragTable"
267.   :data="tableData"
268.   row-key="id"
269.   :row-class-name="rowClassName"
270.   border
271.   >
272.   
273. </el-table><el-table
274.   ref="dragTable"
275.   :data="tableData"
276.   row-key="id"
277.   :row-class-name="rowClassName"
278.   border
279.   >
280.   
281. </el-table><el-table
282.   ref="dragTable"
283.   :data="tableData"
284.   row-key="id"
285.   :row-class-name="rowClassName"
286.   border
287.   >
288.   
289. </el-table><el-table
290.   ref="dragTable"
291.   :data="tableData"
292.   row-key="id"
293.   :row-class-name="rowClassName"
294.   border
295.   >
296.   
297. </el-table><el-table
298.   ref="dragTable"
299.   :data="tableData"
300.   row-key="id"
301.   :row-class-name="rowClassName"
302.   border
303.   >
304.   
305. </el-table>}<el-table
306.   ref="dragTable"
307.   :data="tableData"
308.   row-key="id"
309.   :row-class-name="rowClassName"
310.   border
311.   >
312.   
313. </el-table><el-table
314.   ref="dragTable"
315.   :data="tableData"
316.   row-key="id"
317.   :row-class-name="rowClassName"
318.   border
319.   >
320.   
321. </el-table><el-table
322.   ref="dragTable"
323.   :data="tableData"
324.   row-key="id"
325.   :row-class-name="rowClassName"
326.   border
327.   >
328.   
329. </el-table><el-table
330.   ref="dragTable"
331.   :data="tableData"
332.   row-key="id"
333.   :row-class-name="rowClassName"
334.   border
335.   >
336.   
337. </el-table>}<el-table
338.   ref="dragTable"
339.   :data="tableData"
340.   row-key="id"
341.   :row-class-name="rowClassName"
342.   border
343.   >
344.   
345. </el-table><el-table
346.   ref="dragTable"
347.   :data="tableData"
348.   row-key="id"
349.   :row-class-name="rowClassName"
350.   border
351.   >
352.   
353. </el-table><el-table
354.   ref="dragTable"
355.   :data="tableData"
356.   row-key="id"
357.   :row-class-name="rowClassName"
358.   border
359.   >
360.   
361. </el-table>})<el-table
362.   ref="dragTable"
363.   :data="tableData"
364.   row-key="id"
365.   :row-class-name="rowClassName"
366.   border
367.   >
368.   
369. </el-table><el-table
370.   ref="dragTable"
371.   :data="tableData"
372.   row-key="id"
373.   :row-class-name="rowClassName"
374.   border
375.   >
376.   
377. </el-table>}<el-table
378.   ref="dragTable"
379.   :data="tableData"
380.   row-key="id"
381.   :row-class-name="rowClassName"
382.   border
383.   >
384.   
385. </el-table>})}

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

新版吗？好像是停更了吧。

喜欢鼓捣这些软件，现在用得少，谢谢分享！

感谢分享，下载保存了，貌似很强大

分享、互助 让互联网精神温暖你我

喜欢鼓捣这些软件，现在用得少，谢谢分享！

懂技术并乐意极积无私分享的人越来越少。珍惜