react ant add/change created_at

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} />;

};
相关推荐
Nan_Shu_61421 分钟前
Web前端面试题(2)
前端
知识分享小能手27 分钟前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队1 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光2 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军2 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql5202 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy2 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days20502 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端2 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿2 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js