主页

React sorter 表格倒序排序

2024-07-03 06:04PM

对表格进行排序,可以使用sorter,sorter 是 Ant Design Table 组件中的一个属性,用于定义表格列的排序行为。它允许您指定一个排序函数,该函数用于在用户点击列头时对表格数据进行排序。

sorter 属性可以是以下几种形式:

1.函数形式:

sorter: (a, b) => a.age - b.age

这是一个比较函数,接受两个参数 ab(分别代表两条数据记录),返回一个数字,表示排序的结果。返回值小于 0 表示 a 排在前面,大于 0 表示 b 排在前面。

2.对象形式:

sorter: {
  compare: (a, b) => a.age - b.age,
  multiple: 1, // 1 表示升序,-1 表示降序
}

这个形式允许您同时指定比较函数 compare 和排序方向 multiplemultiple 属性可以是 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)正序排序:

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论