antd 中 Table 组件 sorter 排序

antd 组件中的表格组件 Table 可以进行排序操作, Table 中的 Column 有个sorter属性,可以用来显示、控制排序

sorter 属性接收 布尔值 (boolean) 或 函数(function),sortertrue 时可以显示排序标识,后端排序时则改为true

前端排序时一般可以写一些简单的函数进行操作,例如官方的示例 sorter: (a, b) => a.name.length - b.name.length

这里提供两种常用情况进行参考(使用的JSX格式)

  1. 数字排序
    使用减法即可
            <Column
              className='age'
              title='年龄'
              dataIndex={'name'}
              key='name'
              width={242}
              fixed='left'
              align='left'
              sorter={(a, b) => a.age - b.age}
            />
  1. 文字排序
    使用String.localeCompare()

例如:StringA.localeCompare(StringB)

            <Column
              className='project_name'
              title='栏目标题'
              dataIndex={['project', 'project_name']}
              key='project'
              width={242}
              fixed='left'
              align='left'
              sorter={(a: any, b: any) => a.project.project_name.localeCompare(b.project.project_name)}
              render={(text, record: any) => (
                <>
                  <a onClick={() => this.goSurveyspot(record)}>{text}</a>
                </>
              )}
            />

排序函数,本地排序使用一个函数(参考 Array.sort 的 compareFunction),需要服务端排序可设为 true

你可能感兴趣的:(react,项目问题)