element-ui中table使用SortableJS实现行拖拽和拖拽排序更新

前言

最近项目有列表需要实现拖拽功能，通过调研最终选择强大简介的js拖拽库SortableJS

安装

npm安装

npm install sortablejs --save

使用

引入SortableJS（在要实现表格拖拽的 vue 文件中）

import Sortable from "sortablejs";

基本使用

1：template中使用

注意：el-table必须设置 row-key 否则拖动也无效

<el-table
    stripe
    style="width:100%"
    :data="tableData"
    :row-key="rowKeyFunc"
    :ref="proposalRef"
  >
    <el-table-column type="selection" width="50" align="center">
    </el-table-column>
    <el-table-column
      label="序号"
      width="50"
      align="center"
      prop="orderNum"
    ></el-table-column>
    <el-table-column
      label="整改建议"
      width="550"
      align="left"
      prop="name"
    ></el-table-column>
  </el-table>

注意：el-table必须设置 row-key 否则拖动也无效
row-key可以设置为 row-key="id" ，也可以自定义

rowKeyFunc(row) {
  return row.orderNum;
},

2：mounted中使用

如果表格放在 dialog 或者 drawer 中需要使用 $nextTick

  mounted() {
    this.initSortable();
  }

3：methods中使用

  methods: {
    initSortable() {
      let that = this;
      // 获取表格row的父节点
      const el = this.$refs.proposalRef.$el.querySelector(
        ".el-table__body > tbody"
      );
      // 创建拖拽实例
      new Sortable(el, {
        animation: 150, //动画
        disabled: false, // false 启用拖拽
        // 开始拖动事件
        onStart: () => {
          console.log("开始拖动");
        },
        // 结束拖动事件
        onEnd: ({ newIndex, oldIndex }) => {
          console.log("~ 拖动前索引", oldIndex);
          console.log("~ 拖动后索引", newIndex);
          const currRow = that.tableData.splice(oldIndex, 1)[0];
          this.tableData.splice(newIndex, 0, currRow);
          // 拖拽数据
          let sortableList = [];
          // 拖拽 row 数据
          let sortableRow = {};
          //  将拖拽的数据存入 sortableList 中
          this.tableData.forEach((item, index) => {
            // 拖拽后的数据 sortableList
            if (item.num == oldIndex + 1) {
              sortableRow.id = item.id;
              sortableRow.num = newIndex + 1;
              sortableRow.name = item.name;
              sortableRow.projectId = item.projectId;
              sortableList.push(sortableRow);
            }
          });
          // 拖拽变动数据（从开始到结束影响的数据，需要修改序号的数据）
          // 此处判断了俩种情况 "从下往上拖拽" 和 "从上往下拖拽"
          if (oldIndex > newIndex) {
            // 从下往上拖拽
            // 截取拖拽影响的数据 ，并修改 数据中序号 num
            let sliceList = this.tableData.slice(newIndex + 1, oldIndex + 1);
            sliceList.forEach(item => {
              let sortableAddOne = {};
              sortableAddOne.id = item.id;
              sortableAddOne.num = item.num + 1;
              sortableAddOne.name = item.name;
              sortableList.push(sortableAddOne);
            });
          } else {
            // 从上往下拖拽
            let sliceList = this.tableData.slice(oldIndex, newIndex);
            sliceList.forEach(item => {
              let sortableAddOne = {};
              sortableAddOne.id = item.id;
              sortableAddOne.num = item.num - 1;
              sortableAddOne.name = item.name;
              sortableList.push(sortableAddOne);
            });
          }
          // 这里走的是批量修改的接口，需要根据自己项目进行修改
          let JSONArr = JSON.stringify(sortableList);

          this.$ajax.post(JSONArr, api.urlBatchUpdate, function(_r) {
            this.$notify({
              title: "警告",
              message: "拖拽成功",
              type: "warning"
            });
            // 修改成功后刷新一下列表
            that.sortableRefresh();
          });
        }
      });
    }
  }

上面的配置完成后在 el-table 的列表中就可以使用鼠标拖拽 table 的行了。