react ant add/change created_at

许墨の小蝴蝶2023-08-05 17:22

1.引入ant的 Table

import { Table, Space, Button, message } from 'antd';

2.获得接口的数据的时候增加上创建时间

 const response = await axios.get(`${Config.BASE_URL}/api/v1/calculation_plans?token=${getToken()}`);

      if (response.data.message === 'ok') {

        const data = response.data.data.map((item) => ({

          key: item.id,

          id: item.id,

          name: item.name,

          industry: '-',

          start_year: item.start_year,

          created_at: item.created_at, // 增加创建时间

          end_year: item.end_year,

          calculation_template_name: item.calculation_templates.name,

          year_range: `${item.start_year} - ${item.end_year}`,

        }));

3.对接口的数据进行处理

95       {
 96         title: '创建时间',
 97         dataIndex: 'created_at',
 98         key: 'created_at',
 99       },

这样会显示数据：

2023-07-24T15:10:38.820628+08:00

需要修改为北京时间：

最后做出这样的修改：(显示为北京时间：2023/7/24 15:10:38）

import { Table } from 'antd';

const dataSource = [

  // 数据源

];

const columns = [

  // 其他列配置

  {

    title: '创建时间',

    dataIndex: 'created_at',

    key: 'created_at',

    render: (text) => moment(text).format('YYYY-MM-DD HH:mm:ss'),

  },

];

const MyTable = () => {

  return <Table dataSource={dataSource} columns={columns} />;

};