element ui 表格实现拖拽排序的功能,可以借助第三方插件Sortablejs来实现。
引入sortablejs
npm install sortablejs --save
组件中使用
import Sortable from 'sortablejs';
<el-table ref="el-table":data="listData" row-key="id" style="width: 100%"></el-table>
注意:el-table一定要设置row-key,且row-key绑定的值唯一,不然拖拽可能乱序
mounted() {this.initSort()},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.listData[dragged.rowIndex] //旧位置数据const newRow = _this.listData[related.rowIndex] //被拖拽的新数据},//拖拽结束事件onEnd: evt => {const curRow = _this.listData.splice(evt.oldIndex, 1)[0]_this.listData.splice(evt.newIndex, 0, curRow)}}Sortable.create(el, ops)},