el-table sortable设罡为custom并可以同时选择多列排序以使用后端排序
时间: 2023-07-30 21:07:22 浏览: 175
【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx
在使用Element UI中的el-table组件时,您可以将sortable属性设置为'custom'以启用自定义排序。您也可以通过设置multi-sort属性来允许同时选择多列进行排序。
要使用后端排序,您需要在请求后端数据时将排序规则传递给后端。在el-table的sortable-change事件中,您可以获取当前的排序规则,然后将其传递给后端。
以下是一个示例代码,演示如何启用自定义排序和多列排序,并在后端使用排序规则进行排序:
```
<el-table :data="tableData" :sort-method="sortTable" :multi-sort="true" @sortable-change="onSortChange">
<el-table-column prop="name" label="名称" sortable="custom"></el-table-column>
<el-table-column prop="age" label="年龄" sortable="custom"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
```
在上面的代码中,我们将sortable属性设置为'custom',并将sort-method属性设置为sortTable方法。sortTable方法接收两个参数:当前排序列的prop和排序顺序('ascending'或'descending')。在sortTable方法中,您可以将排序规则存储在组件的data中,并在后续的请求中使用它。
```
methods: {
sortTable(prop, order) {
this.sortProps = [{ prop: prop, order: order }];
return true;
},
onSortChange(sort) {
this.sortProps = sort.sortProps;
// 在此处调用后端API以获取排序后的数据
}
}
```
在上面的代码中,我们使用sortProps数组存储当前的排序规则。在sortable-change事件中,我们更新sortProps数组并使用它来调用后端API以获取排序后的数据。
请注意,上述代码仅提供了一个基本示例,并且您需要根据自己的需求进行修改和优化。
阅读全文