React sorter 表格倒序排序
2024-07-03 06:04PM
对表格进行排序，可以使用sorter，sorter 是 Ant Design Table 组件中的一个属性,用于定义表格列的排序行为。它允许您指定一个排序函数,该函数用于在用户点击列头时对表格数据进行排序。
sorter 属性可以是以下几种形式:
1.函数形式：
sorter: (a, b) => a.age - b.age
这是一个比较函数,接受两个参数 a 和 b(分别代表两条数据记录),返回一个数字,表示排序的结果。返回值小于 0 表示 a 排在前面,大于 0 表示 b 排在前面。
2.对象形式：
sorter: {
compare: (a, b) => a.age - b.age,
multiple: 1, // 1 表示升序，-1 表示降序
}
这个形式允许您同时指定比较函数 compare 和排序方向 multiple。multiple 属性可以是 1 表示升序排序,-1 表示降序排序。
3.字符串形式：
sorter: 'ascend' // 升序排序
sorter: 'descend' // 降序排序
这种形式会自动根据指定的排序方向进行排序，适用于简单的情况。
eg：对序号列进行倒序排序
import React, { Component } from 'react'
const columns = [
{
title: '序号',
dataIndex: 'explain',
key: 'explain',
sorter: (a, b) => b.explain - a.explain, // 添加 sorter 属性
},
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: '使用算法',
dataIndex: 'algorithm_name',
key: 'algorithm_name',
},
];
export default class CalculationPlan extends Component {
render() {
return (
<Table columns={[
...columns,
]}
/>
</div>
</>
)
}
}
页面显示情况如下：
1）未点击排序之前：
2）倒序排序：
3）正序排序：
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论