el-table实现拖拽行排序sortablejs

el-table如何做一个拖拽行排序效果，下面web建站小编给大家详细介绍一下具体实现代码！

安装脚手架

npm install sortablejs --save

el-table基本代码

<template>
  <el-table
    :data="tableData"
    border
    row-key="date"
    style="width: 100%"
  >
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
</template>

引入sortablejs组件实现拖拽功能

import Sortable from "sortablejs";

export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
    };
  },
  mounted() {
    const tbody = document.querySelector(".draggable-table .el-table__body-wrapper tbody");
    new Sortable(tbody, {
      animation: 150,
      // 需要在odEnd方法中处理原始eltable数据，使原始数据与显示数据保持顺序一致
      onEnd: ({ newIndex, oldIndex }) => {
        const targetRow = this.tableData[oldIndex];
        this.tableData.splice(oldIndex, 1);
        this.tableData.splice(newIndex, 0, targetRow);
        console.table(this.tableData);
      },
    });
  },
};