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. 请求接口
    原文作者:impossible1994727
    原文地址: https://blog.csdn.net/impossible1994727/article/details/117295821
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞