el-table多行拖拽排序

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

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

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

定义一个自定义的排序方法 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];
}
});
},
}
登录后复制

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

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

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

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