700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > ant-design 表格组件 Table / ProTable 排序方法sorter 的使用

ant-design 表格组件 Table / ProTable 排序方法sorter 的使用

时间:2020-11-14 22:09:51

相关推荐

ant-design 表格组件 Table / ProTable 排序方法sorter 的使用

ant-design 表格组件 Table / ProTable 排序方法sorter 的使用

antd 组件中的表格组件 Table 可以进行排序操作, Table 中的 Column 有个sorter属性,可以用来显示、控制排序。

sorter 属性接收 布尔值 (boolean) 或 函数(function),sorter 为 true 时可以显示排序标识,后端排序时则改为true。前端排序时一般可以写一些简单的函数进行操作,例如官方的示例 sorter: (a, b) => a.name.length - b.name.length

时间比较需要先转成时间戳再进行比较,如下:

{title: '创建时间',dataIndex: 'createTime',hideInSearch: true,sorter: (a, b) => {const aTime = new Date(a.createTime).getTime(); // 需要先转换成时间戳const bTime = new Date(b.createTime).getTime();return aTime - bTime;},},

使用table 里面的onChange方法,可以获取到当前的排序方式,

const handleChange = (pagination: any, filters: any, sorter: any) => {if (sorter) {setSortOrderTest(sorter.order === 'descend' ? 'DESC' : 'ASC');}};

sorter 输出如下:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。