sorter 是 Ant Design 表格组件(Table)中的一个属性,用于自定义列的排序逻辑。 当点击该列的表头时,表格会根据这个函数的返回值来对数据进行排序。
sorter 属性接受一个函数,这个函数通常有两个参数(比如 row1 和 row2),分别代表表格中的两行数据。函数需要返回一个数值:
负值:表示 row1 应该排在 row2 前面
零:表示 row1 和 row2 排序上相等
正值:表示 row1 应该排在 row2 后面
字符串排序实现
{ title: '服务产品项目名称', key: 'projectName' ,sorter: (row1, row2) => {
return (row1.projectName || '').localeCompare(row2.projectName || '')
} },
而 localeCompare 方法:是 JavaScript 字符串的原生方法,用于比较两个字符串在特定语言环境下的排序顺序。例如:
'Apple'.localeCompare('Banana') // 返回负值(通常是 -1),因为 A 在 B 之前
'Banana'.localeCompare('Apple') // 返回正值(通常是 1),因为 B 在 A 之后
'Apple'.localeCompare('Apple') // 返回 0,因为两个字符串相同
排序逻辑:
如果 row1.projectName 在字母表中排在 row2.projectName 前面,返回负值,row1 会被排在 row2 前面;
如果 row1.projectName 在字母表中排在 row2.projectName 后面,返回正值,row1 会被排在 row2 后面;
如果两个字符串相同,返回 0,排序顺序不变。
日期排序实现:
{ title: '申请时间', key: 'applicationTime' ,sorter: (row1, row2) => {
const time1 = new Date(row1.applicationTime).getTime()
const time2 = new Date(row2.applicationTime).getTime()
return time1 - time2
}},
这个排序函数通过比较两个日期的时间戳来实现日期排序,具体工作方式:
转换为时间戳:new Date(row1.applicationTime).getTime() 将 applicationTime 转换为 JavaScript 的时间戳(自 1970 年 1 月 1 日以来的毫秒数)。例如:
const date = new Date('2023-01-01').getTime() // 返回 1672531200000
时间戳比较:
如果 row1.applicationTime 早于 row2.applicationTime,time1 会小于 time2,time1 - time2 为负值,row1 会被排在 row2 前面;
如果 row1.applicationTime 晚于 row2.applicationTime,time1 会大于 time2,time1 - time2 为正值,row1 会被排在 row2 后面;
如果两个日期相同,time1 - time2 为 0,排序顺序不变。