antd-- table表格排序

按照数字排序

要求后端返回的level是数字

  const columns = [
    {
      title: '等级,
      dataIndex: 'level',
      key: 'name',
      render: (_) =>_,
sorter: (a, b) => a.level - b.level,
    },
]

自定义排序：仅做示例

假设后端返回的不是数字，而是时间，比如2021-05-24 10:54:31

const columns=[   {
      title: '时间',
      dataIndex: 'gradeUpAt',
      render: (_) => _,
      sorter: {
        compare: (a, b) => {
          console.log('a')
          a = a.gradeUpAt == '无' ? 0 : new Date(a.gradeUpAt).getTime();
          b = b.gradeUpAt == '无' ? 0 : new Date(b.gradeUpAt).getTime();
          return a - b;
        },
      },
    },]

通过请求后端接口排序

分为四步：

1. columns里面的sorter直接设为true

   const columns=[
   {
         title: '时间',
         dataIndex: 'exp',
         render: (_) => _,
         sorter: true
       },]

    

2. 给table绑定onChange事件

    <Table
           columns={columns}
           dataSource={tabData}
       
           onChange={(pagination, filters, sorter) => { changetable(pagination, filters, sorter) }}
         />

    

3. 监听onChange事件里面的sorter排序

     const changetable = (pagination, filters, sorter) => {
       if (sorter.order) {
   //当前处于升序或者降序 sorter.order == "descend" ? '降序' : '升序'
       } else {
         //取消排序
       }
     }

    

4. 请求接口