表格拖拽：el-table 实现行拖拽排序 Sortable

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);
    },
}