Sortable它是一個(gè)比較簡單好用的拖拽排序工具
1.首先是安裝下載Sortable （npm install?sortablejs --save）
2.在要進(jìn)行拖拽的頁面引入Sortable （import Sortable from 'sortablejs'）
3.寫個(gè)方法去處理你需要的數(shù)據(jù)，這里需要注意一下需要等待元素渲染完成后再執(zhí)行此方法
mounted() {
this.$nextTick(() => {
this.rowDrop();
});
}
rowDrop() {
const that = this;
// tbody 拿到你要去操作的拖拽元素的父節(jié)點(diǎn)
const tbody = document.querySelector(
'.el-table__body-wrapper tbody',
);
new Sortable(tbody, {
animation: 150, //定義排序動(dòng)畫的時(shí)間 單位是ms
ghostClass: 'blue-background-class', //drop placeholder的css類名 可以不設(shè)置
//開始拖拽
onStart: function (e) {
e.oldIndex; // 父元素索引
},
//結(jié)束拖拽
onEnd: function (obj) {
const list = JSON.parse(
JSON.stringify(that.lastList || that.roleTableList),
);
//obj.oldIndex; 元素在舊父元素中的舊索引
const temp = list.splice(obj.oldIndex, 1)[0];
//obj.newIndex; 元素在新父元素中的新索引
list.splice(obj.newIndex, 0, temp);
that.lastList = list;
},
});
},?4.處理好數(shù)據(jù)以后再去調(diào)修改排序的接口即可完成表格的行拖拽排序工作文章來源：http://www.zghlxwxcb.cn/news/detail-507014.html
5.Sortable里面有很多的方法和配置項(xiàng)大家根據(jù)需要去參考它里面的說明http://www.sortablejs.com/文章來源地址http://www.zghlxwxcb.cn/news/detail-507014.html
到了這里，關(guān)于vue 實(shí)現(xiàn)element-ui 表格的行拖拽排序 （Sortable）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
