el-table实现行拖拽

vue想要实现拖拽 需要安装两个插件(1.vuedraggable;2.sortablejs)

npm install vuedraggable;
npm install sortablejs;

   <el-table :data="tableData" row-key="id">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    </el-table>

import Sortable from "sortablejs";

created() {
    this.$nextTick(() => {
      this.drag();
    });
  },

 drag() {
      const el = document.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      )[0];
      Sortable.create(el, {
        disabled: false, // 拖拽不可用? false 启用
        ghostClass: 'sortable-ghost', //拖拽样式
        animation: 150, // 拖拽延时，效果更好看
        onEnd: (e) => { // 拖拽结束时的触发
            let arr = this.tableData; // 获取表数据
            arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 数据处理，获取最新的表格数据
            this.$nextTick(function () {
              this.tableData= arr;
              console.log(this.tableData)
            })
        },
      });
    },

经过这么久的学习，发现两个拖拽的用法差不多，项目中可根据实际需要运用拖拽