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