通过鼠标拖拽行数据，实现element表格排序

1.普通的el-table的表格渲染数据

<template>
  <div class="app-container" style="height: 100% ">
    <el-table :data="initialList" border :header-cell-style="{ 'text-align': 'center' }" :row-class-name="activeClass" class="tableDragBox">
      <el-table-column label="序号" width="52" align="center" type="index"></el-table-column>
      <el-table-column v-for="(item, index) in formData" :key="index" :label="item.label" :prop="item.prop" show-overflow-tooltip />
    </el-table>
  </div>
</template>

2.监听表格

<script>
export default {
  name: "tableDrag",
  data() {
    return {
      initialList: [
        {
          dataId: "202404220001",
          data1: "第一列数据1",
          data2: "第二列数据1",
          data3: "序号1",
          data4: "10001",
          data5: "20001",
          data6: "20001",
        },
        {
          dataId: "202404220002",
          data1: "第一列数据2",
          data2: "第二列数据2",
          data3: "序号2",
          data4: "10002",
          data5: "20002",
          data6: "20002",
        },
        {
          dataId: "202404220003",
          data1: "第一列数据3",
          data2: "第二列数据3",
          data3: "序号3",
          data4: "10003",
          data5: "20003",
          data6: "20003",
        },
        {
          dataId: "202404220004",
          data1: "第一列数据4",
          data2: "第二列数据4",
          data3: "序号4",
          data4: "10004",
          data5: "20004",
          data6: "20004",
        },
        {
          dataId: "202404220005",
          data1: "第一列数据5",
          data2: "第二列数据5",
          data3: "序号5",
          data4: "10005",
          data5: "20005",
          data6: "20005",
        },
      ],
      // 表格表头
      formData: [
        {
          label: "数据1",
          prop: "data1",
        },
        {
          label: "数据2",
          prop: "data2",
        },
        {
          label: "原序号",
          prop: "data3",
        },
        {
          label: "数据4",
          prop: "data4",
        },
        {
          label: "数据5",
          prop: "data5",
        },
        {
          label: "数据6",
          prop: "data6",
        },
      ],
      dragIndex: null,
      newDragIndex: null,
    };
  },

  created() {},
  mounted() {
    this.$nextTick(() => {
      this.watchTable();
    });
  },
  watch: {
    initialList() {
      this.$nextTick(() => {
        this.watchTable();
      });
    },
  },
  methods: {
    // 监听表格
    watchTable() {
      const dragBox = document.querySelectorAll(".tableDragBox .tableTrBox");
      dragBox.forEach((i, idx) => {
        i.setAttribute("draggable", "true");
        i.ondragstart = () => this.dragStartItem(idx);
        i.ondragover = () => this.dragOverItem(idx);
        i.ondragend = () => this.dragEndItem();
      });
    },
    // 表格行添加class
    activeClass() {
      return "tableTrBox";
    },
    // 拖拽开始-记录起始index
    dragStartItem(idx) {
      this.dragIndex = idx;
    },
    // 拖拽结束-记录目标index
    dragOverItem(index) {
      this.newDragIndex = index;
    },
    // 拖拽完成-整理表格数据
    dragEndItem() {
      const data = this.initialList[this.dragIndex];
      this.initialList.splice(this.dragIndex, 1);
      this.initialList.splice(this.newDragIndex, 0, data);
    },
  },
};
</script>

3.加样式

<style lang="scss" scoped>
.tableTrBox {
  cursor: move !important;
  position: relative !important;
}
</style>

4.实现效果

移动前：

移动后