在项目开发过程中，遇到个需求【想要表格支持拖拽排序】，在ant design vue 的api中翻遍了，都没有看到有关于拖拽排序的文档，在求助了广大网友后，终于实现了这个问题。特此分享一下，给大家看看，如果有什么写的不对的地方，也请大家指正。
// 拖拽
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也可以分享在评论区哦
