ant design pro中的pro table配置dateFormatter
时间: 2023-09-03 17:13:23 浏览: 247
Ant Design Pro中的ProTable组件可以通过配置`dateFormatter`来自动格式化日期数据,以便于在表格中显示。具体配置方法如下:
1. 在`columns`中需要格式化日期的列中,设置`valueType`为`date`。
2. 在`request`中的`params`中,设置`dateFormat`为日期的格式。
示例代码:
```javascript
import ProTable from '@ant-design/pro-table';
import moment from 'moment';
const columns = [
{
title: '日期',
dataIndex: 'date',
valueType: 'date',
},
// 其他列
];
const request = async (params = {}) => {
const { dataFormat, ...restParams } = params;
const response = await fetch('/api/xxx', {
body: JSON.stringify(restParams),
method: 'POST',
});
const data = await response.json();
// 格式化日期数据
data.list = data.list.map((item) => {
return {
...item,
date: moment(item.date).format(dataFormat || 'YYYY-MM-DD'),
};
});
return {
data: data.list,
success: true,
total: data.total,
};
};
<ProTable
columns={columns}
request={request}
dateFormatter="string"
// 其他配置项
/>
```
上述代码中,在`columns`中将`valueType`设置为`date`,表示该列的值为日期类型;在`request`中,将日期数据进行格式化,以便于在表格中进行显示;在`ProTable`组件中,通过`dateFormatter`设置日期的格式化方式,可以是`string`或`number`。
阅读全文