antd 组件中的表格组件Table
可以进行排序操作,Table
中的Column
有个sorter
属性,可以用来显示、控制排序
sorter
属性接收 布尔值 (boolean) 或 函数(function),sorter
为true
时可以显示排序标识,后端排序时则改为true
前端排序时一般可以写一些简单的函数进行操作,例如官方的示例sorter: (a, b) => a.name.length - b.name.length
这里提供两种常用情况进行参考(使用的JSX格式)
数字排序
使用减法即可
<ColumnclassName='age'title='年龄'dataIndex={'name'}key='name'width={242}fixed='left'align='left'sorter={(a, b) => a.age - b.age}/>
文字排序
使用String.localeCompare()
例如:StringA.localeCompare(StringB)
<ColumnclassName='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