antd table sortOrder处理后端返回数据默认排序问题

最新推荐文章于 2023-07-06 16:36:36 发布

张招财711

最新推荐文章于 2023-07-06 16:36:36 发布

阅读量4.6k

点赞数 4

文章标签： reactjs 前端

本文链接：https://blog.youkuaiyun.com/qq_43080360/article/details/123707789

版权

本文介绍了在使用Ant Design的Table组件时，如何处理后端返回的数据并实现默认排序，同时解决排序图标显示不正确的问题。在遇到defaultSortOrder设置无效及所有排序功能失效的情况下，通过定义默认排序变量并在数据处理和onChange方法中更新sorterInfo，成功实现了默认降序排序和小三角亮起的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拿到后端返回的table数据，设置某一列默认降序并且小三角也亮起来，如下图：👇

遇到的问题：根据官网设置defaultSortOrder: 'xxx'之后，排序的小三角没有亮，设置sortOrder之后，所有排序列排序功能都失效，并且小三角置灰了。

解决方法：

定义默认排序的变量：👇我这里是默认降序

const [sorterInfo, setSorterInfo] = useState({ columnKey: target, order: 'descend' })

在接口成功返回数据的地方处理columns格式，设置sorter和sortOrder：👇

columns.map((item: any) => {
      item.sorter = true
      item.sortOrder = sorterInfo.columnKey === item.dataIndex && sorterInfo.order
      return item
    })

在table的onChange方法里重新给sorterInfo赋值：👇这里的page具体输出值，看你的项目里具体输出什么，将改变的列的字段赋值给sorterInfo.columnKey，改变的排序方法重新赋值给sorterInfo.sortOrder，就好了

setSorterInfo({
      columnKey: page.sort,
      order: page.sortOrder === 'asc' ? 'ascend' : 'descend',
    })