Sortable.js使用可参考文档sortable.js sort属性是否允许组内排序 - itxst.com
一要给 el-table 加 row-key="sort",值一定要是唯一的,就因为忘记加这个了,排序一直不生效/(ㄒoㄒ)/~~
<el-table :data="list" id="sortExample" :key="randomKey" row-key="sort">
........
</el-table>
引入依赖
import Sortable from 'sortablejs';
单独写一个初始化排序的方法
initSort() {
this.$nextTick(() => {
const example1 = document.getElementById('sortExample').querySelector('.el-table__body-wrapper tbody');;
const _this = this;
Sortable.create(example1, {
draggable: '.el-table__row', //指定样式类的元素才允许拖动
animation: 800,//过渡动画时间
//拖拽结束时事件
onEnd: function (evt) {
const { newIndex, oldIndex } = evt;
//实时更换list中的数据
const currRow = _this.list.splice(oldIndex, 1)[0];
_this.list.splice(newIndex, 0, currRow);
},
});
})
},
在获取到el-table的数据时调用初始化排序的方法
getList() {
//....
getCellList(data).then((res) => {
this.list= res.data.List;
if (this.list!= null && this.list.length > 0) {
//在获取el-table的数据后调用initSort方法
this.initSort();
}
});
},