antd 中 Table 组件 sorter 排序

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

sorter 属性接收 布尔值 (boolean) 或 函数(function),sortertrue 时可以显示排序标识,后端排序时则改为true

前端排序时一般可以写一些简单的函数进行操作,例如官方的示例 sorter: (a, b) => a.name.length - b.name.length

这里提供两种常用情况进行参考(使用的JSX格式)

  1. 数字排序
    使用减法即可
            <Column
              className='age'
              title='年龄'
              dataIndex={'name'}
              key='name'
              width={242}
              fixed='left'
              align='left'
              sorter={(a, b) => a.age - b.age}
            />
  1. 文字排序
    使用String.localeCompare()

例如:StringA.localeCompare(StringB)

            <Column
              className='project_name'
              title='栏目标题'
              dataIndex={['project', 'project_name']}
              key='project'
              width={242}
              fixed='left'
              align='left'
              sorter={(a: any, b: any) => a.project.project_name.localeCompare(b.project.project_name)}
              render={(text, record: any) => (
                <>
                  <a onClick={() => this.goSurveyspot(record)}>{text}</a>
                </>
              )}
            />

排序函数,本地排序使用一个函数(参考 Array.sort 的 compareFunction),需要服务端排序可设为 true

  • 6
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值