Antd Table组件实现后端多列排序Bug

问题描述

      使用table组件时实现后端多列排序,在点击第一列排序时没有问题,点击第二列排序时,第一列光标常量,第二列无法点击发起降序的请求。

解决方法

API中的sortOrderr配置项,区分哪一列在进行排序,将另一列排序关闭

    {
        title: '运行时间(时:分:秒)',
        dataIndex: 'usedTime',
        width: 170,
        sorter: true,
        sortOrder: sortField === 'usedTime' ? sortOrder : false, //此处进行判断
        render: (text: string, record: Record<string, any>) =>
          record.status === 0 ? <span>容器空载</span> : <span>{text}</span>,
      },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
antd Table组件提供了很方便的列排序功能,可以通过设置`sorter`属性来实现。 首先在表头列中设置`sorter`属性为一个对象,对象中包含两个属性:`compare`和`multiple`。 `compare`属性是一个比较函数,接收两个参数,分别是当前行数据的两个单元格的数据,返回值为`1`或`-1`。当返回值为`1`时表示第一个单元格的数据大于第二个单元格的数据,需要升序排列;当返回值为`-1`时表示第二个单元格的数据大于第一个单元格的数据,需要降序排列。 `multiple`属性用于支持多列排序,当该属性为`true`时,按下`shift`键再点击列头可以添加该列到排序中。 举个例子,假设我们有一个表格数据如下: ```javascript const dataSource = [ { key: '1', name: '张三', age: 23, address: '北京市海淀区', }, { key: '2', name: '李四', age: 25, address: '上海市黄浦区', }, { key: '3', name: '王五', age: 20, address: '广州市天河区', }, ]; ``` 我们可以在表头列中设置`sorter`属性来实现对数据的排序,比如按照年龄从小到大排序: ```javascript import { Table } from 'antd'; const columns = [ { title: '姓名', dataIndex: 'name', key: 'name', }, { title: '年龄', dataIndex: 'age', key: 'age', sorter: (a, b) => a.age - b.age, }, { title: '地址', dataIndex: 'address', key: 'address', }, ]; function App() { return <Table dataSource={dataSource} columns={columns} />; } ``` 这样就可以在年龄列头点击来实现升序或降序排列了。 如果要支持多列排序,只需要将`multiple`属性设置为`true`即可: ```javascript import { Table } from 'antd'; const columns = [ { title: '姓名', dataIndex: 'name', key: 'name', }, { title: '年龄', dataIndex: 'age', key: 'age', sorter: { compare: (a, b) => a.age - b.age, multiple: true }, }, { title: '地址', dataIndex: 'address', key: 'address', sorter: { compare: (a, b) => a.address.localeCompare(b.address), multiple: true }, }, ]; function App() { return <Table dataSource={dataSource} columns={columns} />; } ``` 现在我们可以按下`shift`键再点击地址列头来实现多列排序了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值