电商网站建设与管理 教案东莞市微信网站建设品牌

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