el-table 拖动排序 sortablejs

参考：https://blog.csdn.net/glpghz/article/details/124359331

官网：http://www.sortablejs.com/index.html

安装

cnpm install sortablejs --save

引入

import Sortable from "sortablejs";

table加锚点

<el-table
  id="ability-table"

加载后

  mounted() {
    this.rowDrop();
  },

    // 排序表格
    rowDrop() {
      let el = document.querySelector("#ability-table .el-table__body-wrapper tbody");
      let self = this;
      let ops = {
        animation: 150,
        onEnd({ newIndex, oldIndex }) {
          if (newIndex > oldIndex) {
            let mid = newIndex;
            newIndex = oldIndex;
            oldIndex = mid;
          }
          let beforeNum = 0;
          for (let index = newIndex; index <= oldIndex; index++) {
            // 第一个换成最后一个的orderNum
            if (index == newIndex) {
              beforeNum = self.categoryList[index].orderNum;
              let lastNum = self.categoryList[oldIndex].orderNum;
              self.$set(self.categoryList[index], "orderNum", lastNum);
            } else {
              // 从第二个开始换成上一个的orderNum
              let num = self.categoryList[index].orderNum;
              self.$set(self.categoryList[index], "orderNum", beforeNum);
              beforeNum = num;
            }
          }
          // 这里要保存数据更新list，不然下次就更新不了了
          self.saveListOrder();
        },
      };
      new Sortable(el, ops);
    },