首先我要介绍一个超级好用的工具,sortablejs
直接安装yarn add sortablejs
, 后在自己的vue文件中引入就可以直接使用了
首先提供element plus 和 -ui的区别只在于 传入Sortable的el。
element-ui: ‘.el-table__body-wrapper tbody’
element-plus: ‘.el-table__body tbody’
rowDrop() {// tbody 拿到你要去操作的拖拽元素的父节点const tbody = document.querySelector('.el-table__body tbody',// .el-table__body-wrapper tbody);// eslint-disable-next-line @typescript-eslint/no-this-aliasconst that = this;new Sortable(tbody, {animation: 150, //定义排序动画的时间 单位是msghostClass: 'blue-background-class', //drop placeholder的css类名 可以不设置//开始拖拽onStart: function (e) {// ...开始拖拽逻辑},//结束拖拽onEnd: function (obj) {const list = JSON.parse(JSON.stringify(that.tableData),);const temp = list.splice(obj.oldIndex, 1)[0];list.splice(obj.newIndex, 0, temp);that.tableData = list;},});
感谢这个博文让我了解到了sortablejs这个工具
参考博文地址:https://blog.csdn.net/PaPablame/article/details/128126882
工具官网:http://www.sortablejs.com/