700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > antd 中 Table 组件 sorter 排序

antd 中 Table 组件 sorter 排序

时间:2018-09-04 00:59:16

相关推荐

antd 中 Table 组件 sorter 排序

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

sorter属性接收 布尔值 (boolean) 或 函数(function),sortertrue时可以显示排序标识,后端排序时则改为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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。