vue中使用el-table如何实现列表间的拖拽功能

在 Vue 中使用 `el-table` 实现列表间的拖拽功能，可以借助 `sortablejs` 插件。`sortablejs` 是一个基于原生 JavaScript 的拖拽排序库，其支持 Vue 等框架。

下面是实现步骤：

1. 安装 `sortablejs` 插件

npm install sortablejs --save

2. 在 Vue 组件中引入 `sortablejs`

import Sortable from 'sortablejs';

3. 在 `mounted` 钩子中初始化 `sortablejs`

mounted() {
  const table = document.getElementById('table');
  const options = {
    animation: 150,
    onEnd: this.onEndHandler
  };
  Sortable.create(table, options);
},

其中，`table` 是 `el-table` 对应的 DOM 元素，`options` 是 `Sortable` 的一些配置项。`onEndHandler` 是当拖拽结束时的回调函数，需要自己实现。

4. 实现 `onEndHandler` 回调函数

methods: {
  onEndHandler(event) {
    const { oldIndex, newIndex } = event;
    const newData = [...this.tableData];
    const [removed] = newData.splice(oldIndex, 1);
    newData.splice(newIndex, 0, removed);
    this.tableData = newData;
  },
},

其中，`tableData` 是 `el-table` 的数据源，当拖拽结束后，根据 `oldIndex` 和 `newIndex` 获取被拖拽的元素和目标位置，然后在数据源中重新排序。

5. 在 `el-table` 中添加 `:row-key` 属性

<el-table :data="tableData" :row-key="row => row.id" id="table">
  ...
</el-table>

这里需要为 `el-table` 指定一个唯一的 `row-key`，以便在拖拽结束后能够正确地更新数据源。

完成以上步骤后，即可在 `el-table` 中实现列表间的拖拽功能。