项目场景:
开发过程使用 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
}
}
}
];

文章讲述了如何在使用AntDesignReactTable组件时,针对时间字段进行定制化处理,包括展示当天和非当天的不同格式,并利用onCell属性实现鼠标悬停时显示原始时间戳。
1570

被折叠的 条评论
为什么被折叠?



