1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > ant design table vue table 拖拽排序

ant design table vue table 拖拽排序

时间:2021-06-21 22:27:12

相关推荐

ant design table vue table 拖拽排序

在项目开发过程中,遇到个需求【想要表格支持拖拽排序】,在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也可以分享在评论区哦

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。