|
首先我要介绍一个超级好用的工具，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-alias
const that = this;
new Sortable(tbody, {
animation: 150, //定义排序动画的时间 单位是ms
ghostClass: '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/
|