antd 组件中的表格组件 Table 可以进行排序操作, Table 中的 Column 有个sorter属性,可以用来显示、控制排序。根据我的总结分为一下几种情况:

情况一:数字类型

 {
      title: '用户数量',
      dataIndex: 'userNumber',//userNumber为number类型
      align: 'center',
      width: 'auto',
      hideInForm: true,
      editable: false,
      defaultSortOrder:'descend',//默认降序,升序用ascend
      sorter:(a, b) =>a.userNumber -b.userNumber,
      hideInSearch: true,
    },

情况二:字符串类型排序

 {
      title: '账号',
      dataIndex: 'userId',//字符串类型
      defaultSortOrder:'descend',
      sorter: (a, b) => a.userId.localeCompare(b.userId, 'en'),
      align: 'center',
  },

localeCompare() 方法提供的比较字符串的方法,考虑了默认的本地排序规则。ECMAscript 标准并没有规定如何进行本地特定的比较操作,它只规定该函数采用底层操作系统提供的排序规则。

情况三:时间类型排序

{
      title: " 时间",
      key: 'since',
      dataIndex: 'createdAt',
      hideInSearch: true,
      align: 'center',
      valueType: 'dateTime',
      defaultSortOrder: 'descend',
      sorter: (a, b) => Date.parse(a.createdAt.toString()) - Date.parse(b.createdAt.toString()),
  },

情况四:时间类型和一些空字符串混合在一起的排序

按照正常的时间降序排序话,时间大的在上方,但是空字符串的就会在下方。现在的需求是让空字符串的在表格上方,并且把空字符串排在上方后,时间大的在上方,时间小的在下方。

   {
      title: '下达时间',
      dataIndex: 'assignmentTime',
      hideInForm: true,
      align: 'center',
      valueType: 'dateTimeRange',
      defaultSortOrder:'descend',
      sorter: (a, b) =>  {
        var timeA = a.assignmentTime
        var timeB = b.assignmentTime // ignore upper and lowercase
        if(timeA!=null &&timeB!=null){
          if ((Date.parse(timeA)-Date.parse(timeB)>0)) {
            return 1
          }
          if ( (Date.parse(timeA)-Date.parse(timeB)<0)) {
            return -1
          }
        }
        if(timeA==null ||timeB==null ){
          if ((timeA==null)) {
            return 1
          }
          if ( timeB==null) {
            return -1
          }
        }
        return 0
        
      },
      render: (text, record, index) => {
        // console.log("数据hjaskjsjl ki++++",record.assignmentTime);
        return record.assignmentTime;
      }
    },

以上代码实现的结果如下图所示

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐