w笔记--表格组件(Table)的sorter属性

发布于:2025-05-28 ⋅ 阅读:(22) ⋅ 点赞:(0)

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,排序顺序不变。


网站公告

今日签到

点亮在社区的每一天
去签到