在项目开发过程中,遇到个需求【想要表格支持拖拽排序】,在ant design vue 的api中翻遍了,都没有看到有关于拖拽排序的文档,在求助了广大网友后,终于实现了这个问题。特此分享一下,给大家看看,如果有什么写的不对的地方,也请大家指正。
<a-table :customRow="customRow" :dataSource="tableData">
// 拖拽
customRow (record, index) {
return {
props: {
draggable: 'true'
},
style: {
cursor: 'pointer'
},
on: {
// 鼠标移入
mouseenter: (event) => {
// 兼容IE
var ev = event || window.event
ev.target.draggable = true
},
// 开始拖拽
dragstart: (event) => {
// 兼容IE
var ev = event || window.event
// 阻止冒泡
ev.stopPropagation()
// 得到源目标数据
this.sourceObj = record
console.log(record)
console.log(this.sourceObj)
},
// 拖动元素经过的元素
dragover: (event) => {
// 兼容 IE
var ev = event || window.event
// 阻止默认行为
ev.preventDefault()
},
// 鼠标松开
drop: (event) => {
// 兼容IE
var ev = event || window.event
// 阻止冒泡
ev.stopPropagation()
// 得到目标数据
console.log(record)
console.log(this.targetObj)
this.targetObj = record
const tempData = this.data
tempData[this.targetObj.weight] = this.sourceObj
tempData[this.sourceObj.weight] = this.targetObj
let weightList = []
tempData.forEach((item, index) => {
item.weight = index
weightList.push({
id:item.id,
weight: index
})
})
//将值调换就可以实现了
this.data = weightList
}
}
}
},
栓Q阅读,有更好的方法,(^-^)V也可以分享在评论区哦