vue 使用 sortable 實作 el-table 行、列 拖拽排序

1. npm 下載：

npm install sortablejs --save

2. 引入：

import Sortable from "sortablejs";

3. 代碼：

<template>
  <div class="table">
    <el-table
      ref="dragTable"
      :data="tableData"
      :key="key"
      border
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        v-for="col in tableHeaderData"
        :key="col.id"
        :prop="col.prop"
        :label="col.label"
      >
        <template v-if="col.template">
          <el-button class="move" type="text" size="small">拖 拽</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import Sortable from "sortablejs";
export default {
  data() {
    return {
      // 表頭資料
      tableHeaderData: [
        { label: "日期", prop: "date" },
        { label: "姓名", prop: "name" },
        { label: "地址", prop: "address" },
        { label: "操作", prop: "", template: true },
      ],
      // 表格資料
      tableData: [
        {
          id: "1",
          name: "姓名_1",
          date: "日期-11-11",
          address: "地址_1",
        },
        {
          id: "2",
          name: "姓名_2_不可拖拽",
          date: "日期-22-22",
          address: "地址_2_不可拖拽",
          disabled: true,
        },
        {
          id: "3",
          name: "姓名_3",
          date: "日期-33-33",
          address: "地址_3",
        },
        {
          id: "4",
          name: "姓名_4",
          date: "日期-44-44",
          address: "地址_4",
        },
        {
          id: "5",
          name: "姓名_5",
          date: "5555-55-55",
          address: "地址_5",
        },
      ],
      key: 1,
    };
  },
  methods: {
    // 行拖拽
    initSortableRow() {
      // 獲取表格row的父節點
      const eleRow = this.$refs.dragTable.$el.querySelector(
        ".el-table__body > tbody"
      );
      // 創建行拖拽實體
      const dragTableRow = Sortable.create(eleRow, {
        animation: 150, //影片
        handle: ".move", //指定拖拽目標，點擊此目標才可拖拽元素(此例中設定操作按鈕拖拽)
        filter: ".disabled", //指定不可拖動的類名（el-table中可通過row-class-name設定行的class）
        dragClass: "dragClass", //設定拖拽樣式類名
        ghostClass: "ghostClass", //設定拖拽停靠樣式類名
        chosenClass: "chosenClass", //設定選中樣式類名
        // 開始拖動事件
        onStart: () => {
          console.log("開始拖動");
        },
        // 結束拖動事件
        onEnd: (e) => {
          console.log(
            "結束拖動",
            `拖動前索引${e.oldIndex}---拖動后索引${e.newIndex}`
          );
        },
      });
    },
    // 列拖拽
    initSortableCol() {
      // 獲取表格col的父節點
      const eleCol = this.$refs.dragTable.$el.querySelector(
        ".el-table__header-wrapper tr"
      );
      // 創建列拖拽實體
      const dragTableCol = Sortable.create(eleCol, {
        animation: 150,
        dragClass: "dragClass",
        ghostClass: "ghostClass",
        chosenClass: "chosenClass",
        // 結束拖動事件
        onEnd: (e) => {
          // 拖拽結束之后通過修改tableHeaderData順序改變表頭順序
          const dragHeaderCopy = this.tableHeaderData[e.oldIndex]; // 備份當前拖拽的表頭
          this.tableHeaderData.splice(e.oldIndex, 1); //把當前拖動的表頭去掉
          this.tableHeaderData.splice(e.newIndex, 0, dragHeaderCopy); //把當前拖拽的表頭添加到新位置
          /**
           * 在做列拖拽功能時發現問題：表頭位置錯亂，但是內容列正常
           * 于是我給el-table系結key，每次拖拽結束改變key觸發表格重新渲染，
           * 但引出新的問題：表格重渲拖拽事件丟失，導致之后無法拖拽
           * 于是我在表格重渲之后重新呼叫拖拽方法創建拖拽實體，功能正常了
           * 如果有更好的解決方案，歡迎評論、私信交流，謝謝
           * **/
          this.key += 1;
          this.$nextTick(() => {
          	this.initSortableRow();
            this.initSortableCol();
          });
          console.log(dragHeaderCopy, "結束拖動", this.tableHeaderData);
        },
      });
    },
    // 設定表格row的class(此例中通過設定class來配合拖拽屬性filter設定某行不可拖拽)
    tableRowClassName({ row }) {
      if (row.disabled) {
        return "disabled";
      }
      return "";
    },
  },
  mounted() {
    // 行拖拽
    this.initSortableRow();
    // 列拖拽
    this.initSortableCol();
  },
};
</script>
<style lang='scss'>
// 拖拽
.dragClass {
  background: rgba($color: #41c21a, $alpha: 0.5) !important;
}
// 停靠
.ghostClass {
  background: rgba($color: #6cacf5, $alpha: 0.5) !important;
}
// 選擇
.chosenClass:hover > td {
  background: rgba($color: #f56c6c, $alpha: 0.5) !important;
}
</style>