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，不然会出现排序不对的情况。

示例代码

<template>
  <div style="width:800px"> <el-table :data="tableData" border row-key="id" align="left"> <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :label="item.label"> </el-table-column> </el-table> <pre style="text-align: left"> {{dropCol}} </pre> <hr> <pre style="text-align: left"> {{tableData}} </pre>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  data() { return { col: [ { label: '日期', prop: 'date' }, { label: '姓名', prop: 'name' }, { label: '地址', prop: 'address' } ], dropCol: [ { label: '日期', prop: 'date' }, { label: '姓名', prop: 'name' }, { label: '地址', prop: 'address' } ], tableData: [ { id: '1', date: '2016-05-02', name: '王小虎1', address: '上海市普陀区金沙江路 100 弄' }, { id: '2', date: '2016-05-04', name: '王小虎2', address: '上海市普陀区金沙江路 200 弄' }, { id: '3', date: '2016-05-01', name: '王小虎3', address: '上海市普陀区金沙江路 300 弄' }, { id: '4', date: '2016-05-03', name: '王小虎4', address: '上海市普陀区金沙江路 400 弄' } ] }
  },
  mounted() { this.rowDrop() this.columnDrop()
  },
  methods: { //行拖拽 rowDrop() { const tbody = document.querySelector('.el-table__body-wrapper tbody') const _this = this Sortable.create(tbody, { group : { name : "words", pull : true, put : true }, animation : 150, //动画参数 onAdd : function(evt) {//拖拽时候添加有新的节点的时候发生该事件 }, onUpdate : function(evt) {//拖拽更新节点位置发生该事件 console.log('onUpdate.foo:', [evt.item, evt.from]); }, onRemove : function(evt) {//删除拖拽节点的时候促发该事件 console.log('onRemove.foo:', [evt.item, evt.from]); }, onStart : function(evt) {//开始拖拽出发该函数 console.log('onStart.foo:', [evt.item, evt.from]); }, onSort : function(evt) {//发生排序发生该事件 console.log('onUpdate.foo:', [evt.item, evt.from]); }, onEnd({ newIndex, oldIndex }) { const currRow = _this.tableData.splice(oldIndex, 1)[0] _this.tableData.splice(newIndex, 0, currRow) } }) }, //列拖拽 columnDrop() { const wrapperTr = document.querySelector('.el-table__header-wrapper tr') this.sortable = Sortable.create(wrapperTr, { animation: 180, delay: 0, onEnd: evt => { const oldItem = this.dropCol[evt.oldIndex] this.dropCol.splice(evt.oldIndex, 1) this.dropCol.splice(evt.newIndex, 0, oldItem) } }) }
  }
}
</script>
<style scoped>
</style>

  

 

  
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
 

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/105357684