基于sortablejs实现拖拽element-ui el-table表格行进行排序

可以用原生的dragstart、drag、dragend、dragover、drop、dragleave实现这个效果，但是有现成的轮子就不要重复造了，看效果：

 

<template>
  <el-table :class="$options.name" :data="tableData" ref="table" row-key="ID">
    <!-- 注意：必须要定义row-key="ID"，否者会导致拖拽顺序错乱 -->
    <el-table-column type="index" label="序号" width="60" />
    <el-table-column prop="label" label="列名">
      <template slot-scope="scope">
        <el-link :type="scope.row.type" :underline="false">{{ scope.row.label }}</el-link>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import sortablejs from "sortablejs"; //npm install sortablejs --save
export default {
  name: "dragTableRow",
  data() {
    return {
      tableData: [
        { ID: 1, value: 1, label: "显示文本1", type: `primary` },
        { ID: 2, value: 2, label: "显示文本2", type: `success` },
        { ID: 3, value: 3, label: "显示文本3", type: `warning` },
        { ID: 4, value: 4, label: "显示文本4", type: `danger` },
        { ID: 5, value: 5, label: "显示文本5", type: `info` },
      ],
    };
  },
  mounted() {
    this.initDragSortTableRow(); //拖拽表格行排序
  },
  methods: {
    initDragSortTableRow() {
      let el = this.$refs.table.$el.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      )[0];
      sortablejs.create(el, {
        ghostClass: "ghostClass", //定义拖拽的时候接触到的行样式
        setData: (dataTransfer) => {
          dataTransfer.setData("自定义传参字段", "传输内容");
        },
        onEnd: (e) => {
          this.$g.array.moveArrayElement(this.tableData, e.oldIndex, e.newIndex); //修改数组的顺序
          console.log(e.originalEvent.dataTransfer.getData("自定义传参字段"));
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dragTableRow {
  >>> .ghostClass {
    td {
      background-color: #ecf5ff!important;
      border-bottom-color: #409eff;
    }
  }
}
</style>