el-table如何自定义排序
时间: 2023-12-01 21:40:52 浏览: 128
el-table可以通过设置sortable为custom来自定义排序。具体步骤如下:
1.在el-table上设置sortable为custom。
2.监听sort-change事件,在事件回调中获取当前排序的字段名和排序顺序。
3.向接口请求排序后的表格数据。
另外,el-table还提供了以下两种配置方式:
1.通过default-sort属性设置默认的排序列和排序顺序。
2.通过sort-orders属性设置排序的顺序。
下面是一个示例代码,演示如何自定义排序:
```html
<template>
<el-table :data="tableData" :sortable="true" @sort-change="handleSortChange">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="score" label="分数"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, score: 90 },
{ name: '李四', age: 20, score: 80 },
{ name: '王五', age: 22, score: 70 }
]
}
},
methods: {
handleSortChange({ prop, order }) {
// 向接口请求排序后的表格数据
console.log(`当前排序的字段名为:${prop},排序顺序为:${order}`)
}
}
}
</script>
```
阅读全文