el-table实现行拖拽

vue想要实现拖拽 需要安装两个插件(;)

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(() => {
      ();
    });
  },

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

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