antd table sortOrder处理后端返回数据默认排序问题
·
拿到后端返回的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',
})

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐


所有评论(0)