本篇内容主要讲解“怎么使用Vue+Element树形表格实现拖拽排序”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用Vue+Element树形表格实现拖拽排序”吧!
计算
安全
数据库
网络和加速
企业服务
npm install sortablejs --saveimport Sortable from 'sortablejs'<el-table ref="table" row-key="id" :data="tableData" >
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
</el-table>树形表格排序实现原理：把树形的结构转为列表再进行拖拽，不转换的话，拖拽的位置是不对的，就出错了
data() {
return {
tableData: [
{
id: 1,
name: 'AAA',
level: 1,
children: [
{
id: 2,
name: 'A-1',
level: 2
}
]
},
{
id: 3,
name: 'BBB',
level: 1,
children: []
}
],
activeRows: [] // 转换为列表的数据
}
},
mounted () {
this.rowDrop()
},
methods: {
// 将树数据转化为平铺数据
treeToTile (treeData, childKey = 'children') {
const arr = []
const expanded = data => {
if (data && data.length > 0) {
data.filter(d => d).forEach(e => {
arr.push(e)
expanded(e[childKey] || [])
})
}
}
expanded(treeData)
return arr
},
rowDrop() {
const tbody = this.$refs.table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
Sortable.create(tbody , {
animation: 300,
onMove: () => {
this.activeRows = this.treeToTile(this.tableData) // 把树形的结构转为列表再进行拖拽
},
onEnd: e => {
//e.oldIndex为拖动一行原来的位置，e.newIndex为拖动后新的位置
if (e.oldIndex !== e.newIndex) { // 根据自己项目需求增添条件限制
const oldRow = this.activeRows[e.oldIndex] // 移动的那个元素
const newRow = this.activeRows[e.newIndex] // 新的元素
// 请求接口排序，根据后端要求填写参数
}
}
})
}
}这里就使用了2个方法，还有其它方法，根据自己需求来使用
onAdd: function (evt) { // 拖拽时候添加有新的节点的时候发生该事件
console.log('onAdd.foo:', [evt.item, evt.from])
},
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 }) { // 结束拖拽
let currRow = _this.tableData.splice(oldIndex, 1)[0]
_this.tableData.splice(newIndex, 0, currRow)
}1.如果你的onEnd方法不是箭头函数，如下面这样，需要在上面定义一下this指向，不然会报错
const _this = this
Sortable.create(tbody , {
onEnd ({ oldIndex, newIndex }) {
}
})2.添加拖拽的方法，需要等表格数据获取到，不然有可能是空的tbody ，拖拽就不生效了。 可以在await表格数据获取后，在调用rowDrop方法
3.如果刷新了表格，会导致拖拽失效，需要重新添加拖拽方法this.rowDrop()
4.如果刷新表格会导致页面刷新，滚动条就不在之前操作的位置，需要重新滚动页面，体验效果不好。解决方案就是需要记录滚动条位置，拖拽后刷新页面自动滚动到当前位置。
到此，相信大家对“怎么使用Vue+Element树形表格实现拖拽排序”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
