el-table 拖动排序 sortablejs

一杯浊酒敬残月，半生飘零是殇年 / 2023-08-18 / 原文

参考：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

　　:key="componentKey"

  id="ability-table"

data，用于刷新挂载组件

  data() {
    return {

      componentKey: 0,

加载后

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

更新数据

    // 保存拖动排序更改
    saveListOrder() {
      let data = [];
      this.categoryList.forEach((item) => {
        data.push({
          id: item.id,
          orderNum: item.orderNum,
        });
      });
      saveOrderNumList(data).then((response) => {
        this.$modal.msgSuccess("操作成功");
　　　　// 这里需要重新挂载组件
        this.componentKey++;
        this.$nextTick(() => {
          this.getList();
          this.rowDrop();
        });
      });
    },