VUE专题 ElementU加入表格拖拽功能 加入注意点

Script引入中加入

先引入拖拽的JS依赖
与script中的import同级

let Sortable = require('@/libs/Sortable.js')

Methods:

/**
* 排序方法
*/
setSort(){
const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
this.sortable = Sortable.create(el,{
ghostClass:'sortable-ghost',
setData:function(dataTransfer){
dataTransfer.setData('Text', '')
},
onEnd: evt => {
const targetRow = this.listData.splice(evt.oldIndex, 1)[0];
this.listData.splice(evt.newIndex, 0, targetRow);
}
})
},

Mounted:中调用 一定放在mounted周期中

就是上面的方法

this.setSort()

表格Template

重点注意 :data ref row-key

<Table :data="listData" style="width: 100%;margin-top:2%"
 ref="dragTable" row-key="id" border>
 ......
 中间为常规的tableColumn
 .......
 </Table>

注意事项

在所有引入和写法没有问题的情况下，检查项目本身的导入JS是否正确
同时不同浏览器可能有不同表现