antd的table对时间列进行排序
时间: 2023-09-07 07:01:42 浏览: 215
antd的Table组件可以轻松地对时间列进行排序。要在时间列中实现排序,需要将时间列的数据格式化为Date对象,并通过自定义的比较函数来指定排序规则。
首先,确保时间数据以Date对象的形式呈现在时间列中。如果数据源中的时间数据是字符串格式,我们可以使用moment库将其解析为Date对象。
然后,在Table组件中,通过设置columns的sorter属性为一个自定义的比较函数。这个比较函数将根据两个时间值的差异来决定它们的排序顺序。在比较函数中,我们可以使用Date对象的getTime()方法获取时间的毫秒数,然后进行比较。
下面是一个示例代码:
```jsx
import { Table } from 'antd';
import moment from 'moment';
// 假设data是时间数据的数组
const data = [
{ id: 1, name: '张三', time: '2021-01-01 10:00:00' },
{ id: 2, name: '李四', time: '2021-01-02 09:00:00' },
{ id: 3, name: '王五', time: '2021-01-03 08:00:00' },
];
// 将时间数据解析为Date对象
const formattedData = data.map(item => ({
...item,
time: moment(item.time).toDate(),
}));
// 创建columns对象
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '时间',
dataIndex: 'time',
key: 'time',
sorter: (a, b) => a.time.getTime() - b.time.getTime(), // 指定比较函数
// 如果需要倒序排序,可以使用 b.time.getTime() - a.time.getTime()
},
];
// 渲染Table组件
<Table columns={columns} dataSource={formattedData} />;
```
通过以上代码,我们可以在Table组件中对时间列进行排序。
阅读全文