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

最新推荐文章于 2024-09-20 15:54:31 发布

精致的猪猪^_^

最新推荐文章于 2024-09-20 15:54:31 发布

阅读量1w

点赞数 4

分类专栏： react 文章标签：前端 typescript react.js

本文链接：https://blog.csdn.net/baidu_25051161/article/details/122166352

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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');
    }
  };