首先我要介绍一个超级好用的工具，sortablejs
直接安装yarn add sortablejs, 后在自己的vue文件中引入就可以直接使用了
首先提供element plus 和 -ui的区别只在于 传入Sortable的el。
element-ui: ‘.el-table__body-wrapper tbody’
element-plus: ‘.el-table__body tbody’文章来源：https://www.toymoban.com/news/detail-720872.html
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/文章来源地址https://www.toymoban.com/news/detail-720872.html
到了这里，关于element(-ui 和 -plus)的table实现拖拽排序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
