项目场景:
开发过程使用 AntDesign React Table组件进行表格数据展示。
问题描述
在展示表格数据时,由于时间字段需进行特殊处理 —— 若为当天则展示 HH:mm:ss,若非当天,则展示 YYYY-MM-DD;同时鼠标悬停时,还要展示原始数据 YYYY-MM-DD HH:mm:ss。
const columns: TableColumnsType<DataType> = [
{
title: '上传时间',
dataIndex: 'creTime',
render: (time: string) => timeFilter(time),
}
];
解决方案:
查阅文档,Table 组件的 Column 有一个 onCell 属性,可以对当前单元格进行操作,包括设置 td 标签的 title、点击操作 onClick 等。
const columns: TableColumnsType<DataType> = [
{
title: '上传时间',
dataIndex: 'creTime',
render: (time: string) => timeFilter(time),
onCell: (record) => {
return {
title: record.creTime
}
}
}
];