第一步,先随便创建element表格
<el-table ref="dragTable" :data="tableData" style="width: 100%" border fit highlight-current-row>
<el-table-column label="日期" width="180">
<template slot-scope="{ row }">
<span>{
{ row.date }}</span>
</template>
</el-table-column>
<el-table-column label="姓名" width="180">
<template slot-scope="{ row }">
<span>{
{ row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column label="拖拽">
<template>
<i style="cursor: pointer;" class="el-icon-setting"></i>
</template>
</el-table-column>
</el-table>
第二步,里面的数据源tableData直接复制饿了么上的
第三步,需要安装sortablejs库并且在头部引入
import Sortable from 'sortablejs'
第四步,通过ref获取table,这里给table的ref设置为dragTable
![在这里插入图片描述](https://img-blog.csdnimg.cn/9e707ce59d794721a549b753b972bf25.png)
第五步,就是获取table然后设置它的一些属性,比如拖拽时的CSS,拖拽时的一些事件等,然后需要注意的是需要再生命周期函数mounted里调用这个方法,因为这个方法可以获取dom
data() {
return {
sortable: null,
};
},
mounted() {
this.dragTable()
},
methods: {
dragTable() {
const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
this.sortable = Sortable.create(el, {
onEnd: () => {
alert('成功')
}
})
}
},
第六步,实现效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/bf2faae035b346d09e815691699cf9e2.gif#pic_center)