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

};
相关推荐
携欢15 小时前
PortSwigger靶场之Exploiting server-side parameter pollution in a REST URL通关秘籍
前端·javascript·安全
鹏多多15 小时前
今天你就是VS Code之神!15个隐藏技巧让代码效率翻倍
前端·程序员·visual studio code
linksinke16 小时前
html案例:制作一个图片水印生成器,防止复印件被滥用
开发语言·前端·程序人生·html
寒月霜华16 小时前
JavaWeb-html、css-网页正文制作
前端·css·html
执沐16 小时前
HTML实现流星雨
前端·html
*濒危物种*16 小时前
HTML标签语法,基本框架
前端·css·html
软件技术NINI16 小时前
html css js网页制作成品——HTML+CSS+js早餐铺网页设计(4页)附源码
javascript·css·html
IT_陈寒16 小时前
Vue3性能优化实战:这7个技巧让我的应用提速50%,尤雨溪都点赞!
前端·人工智能·后端
艾小码16 小时前
前端必备:JS数组与对象完全指南,看完秒变数据处理高手!
前端·javascript
weixin-a1530030831617 小时前
vue疑难解答
前端·javascript·vue.js