element plus 表格 sortable 排序默认排序
时间: 2024-10-22 22:16:04 浏览: 45
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
3星 · 编辑精心推荐
Element Plus 的表格组件 (`el-table`) 提供了 `sortable` 属性来进行列的排序功能。当 `sortable` 设置为 `true` 时,你可以通过设置 `defaultSort` 或者在列上定义 `sorter` 函数来自定义初始排序。
`defaultSort` 是一个对象,包含两个属性:`prop`(表示要排序的列的字段名)和 `order`(可选,表示排序顺序,默认为 `asc` 即升序)。例如:
```vue
<template>
<el-table :data="tableData" :columns="columns" :sortable="true">
...
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
// ... 表格数据
],
columns: [
{ prop: 'name', label: 'Name', sortable: true, defaultSort: { prop: 'name', order: 'desc' } },
{ prop: 'age', label: 'Age' },
// ...
]
};
}
};
</script>
```
在这个例子中,名字列将会默认按降序排序。如果你只想开启排序功能但不指定初始排序,可以在列对象里直接设置 `sortable: true`,然后用户可以通过点击表头自定义排序。
如果你想让用户不能自己更改排序,可以使用 `reserveSort` 字段,将其设置为 `true`。这将保留当前排序状态,直到手动更改或重新加载数据。
阅读全文