el-table sortable设罡为custom并可以选择多列排序以使用后端排序
时间: 2023-07-30 12:07:22 浏览: 109
如果需要使用后端排序,可以将 el-table-column 的 sortable 属性设置为 'custom',并在 el-table 上绑定 @sort-change 事件。在事件处理方法中,你可以获取到排序的字段和方式,然后通过 AJAX 请求将排序后的数据从后端获取到并更新到表格中。以下是一个示例代码:
```
<template>
<el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}" @sort-change="handleSortChange">
<el-table-column prop="date" label="日期" :sortable="'custom'" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" :sortable="'custom'" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
{ date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
{ date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }
]
}
},
methods: {
handleSortChange({ prop, order }) {
// 发送 AJAX 请求,获取排序后的数据
// 更新 tableData 数据
}
}
}
</script>
```
在 handleSortChange 方法中,你可以根据 prop 和 order 的值发送 AJAX 请求,将排序后的数据从后端获取到并更新到 tableData 数据中,然后表格会自动更新展示。
阅读全文