element ui 表格实现拖拽排序的功能,可以借助第三方插件Sortablejs来实现。
1.引入sortablejs
npm install sortablejs --save
2.组件中引入
import Sortable from 'sortablejs';
<el-table
ref="el-table"
row-key="id"
:data="tableData"
>
</el-table>
注意:el-table一定要设置row-key,且row-key绑定的值唯一,不然拖拽可能乱序
3.拖拽方法
mounted() {
this.initSort();
},
methods: {
// 行拖拽
initSort() {
const el = this.$refs["el-table"].$el.querySelector(
".el-table__body-wrapper > table > tbody"
);
let _this = this;
const ops = {
animation: 200, //动画时长
handle: ".el-table__row", //可拖拽区域class
//拖拽中事件
onMove: ({ dragged, related }) => {
const oldRow = _this.tableData[dragged.rowIndex]; //旧位置数据
const newRow = _this.tableData[related.rowIndex]; //被拖拽的新数据
},
//拖拽结束事件
onEnd: (evt) => {
const curRow = _this.tableData.splice(evt.oldIndex, 1)[0];
_this.tableData.splice(evt.newIndex, 0, curRow);
},
};
Sortable.create(el, ops);
},
}