el-table多行拖拽排序

`el-table` 是 Element UI 中的一个表格组件，它支持丰富的功能，包括数据排序。在 `el-table` 中实现多行拖拽排序通常会涉及以下几个步骤：

1. 首先，在数据列表上启用排序功能，通过设置 `sortable` 属性为 `true`，并提供一个列的排序规则数组。

<el-table :data="tableData" :sort-method="customSortMethod">
  <el-table-column prop="name" label="名称" sortable>
  </el-table-column>
  <!-- 其他列... -->
</el-table>

2. 定义一个自定义的排序方法 `customSortMethod`，这个方法接受两个待比较的元素和当前排序字段作为参数。你可以使用数组的 `sort` 或 `compare` 方法来进行实际的排序操作，并更新数据。

methods: {
  customSortMethod(column, sortOrders) {
    this.tableData.sort((a, b) => {
      if (column.order === 'ascend') {
        return sortOrders ? a[column.key] > b[column.key] ? 1 : -1 : a[column.key] - b[column.key];
      } else {
        return sortOrders ? a[column.key] < b[column.key] ? 1 : -1 : b[column.key] - a[column.key];
      }
    });
  },
}

3. 使用第三方库如 `Sortable.js` 实现拖拽功能，当用户开始拖动一行时，监听 `dragstart` 事件，记录下源行和目标行的位置，然后监听 `dragover` 和 `drop` 事件，根据事件处理函数调整数据的位置。

4. 要允许多行拖拽，你需要在 `Sortable` 的配置里开启 `multi` 参数为 `true`。

5. 当排序完成后，可以触发表单的提交或者数据更新。

Sortable.create(this.$refs.tableWrapper, {
  //...
  multi: true,
  onEnd: (e) => {
    this.customSortMethod(null, null); // 排序结束后，手动调用排序方法
  }
});