Table 表格 - 排序与筛选
Table 组件支持对数据进行排序和筛选。
排序
设置列的 sortable 属性为 true 即可启用排序功能。
日期 | 姓名 | 年龄 | 标签 |
|---|
2024-01-01 | 张三 | 28 | 家 |
2024-01-02 | 李四 | 35 | 公司 |
2024-01-03 | 王五 | 22 | 家 |
2024-01-04 | 赵六 | 45 | 公司 |
2024-01-05 | 钱七 | 31 | 学校 |
排序
筛选
设置列的 filterable 属性为 true 并提供 filters 选项即可启用筛选。
日期 | 姓名 | 标签 |
|---|
2024-01-01 | 张三 | 家 |
2024-01-02 | 李四 | 公司 |
2024-01-03 | 王五 | 家 |
2024-01-04 | 赵六 | 公司 |
2024-01-05 | 钱七 | 学校 |
筛选
自定义排序
通过 sortMethod 属性可以自定义排序逻辑。
姓名 | 年龄 |
|---|
张三 | 28 |
李四 | 35 |
王五 | 22 |
赵六 | 45 |
钱七 | 31 |
姓名列按字符长度排序
自定义排序
多列排序
配置 sort-config.multiple 为 true 可启用多列排序。
日期 | 年龄 |
|---|
2024-01-01 | 28 |
2024-01-02 | 35 |
2024-01-03 | 22 |
2024-01-04 | 45 |
2024-01-05 | 31 |
多列排序
清除排序
通过表格实例的 clearSort 方法清除排序状态。
日期 | 姓名 | 年龄 | 标签 |
|---|
2024-01-01 | 张三 | 28 | 家 |
2024-01-02 | 李四 | 35 | 公司 |
2024-01-03 | 王五 | 22 | 家 |
2024-01-04 | 赵六 | 45 | 公司 |
2024-01-05 | 钱七 | 31 | 学校 |
清除排序