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

};
相关推荐
疯狂动物城在逃flash2 分钟前
数据库入门:SQL学习路线图与实战技巧
前端
前端小巷子7 分钟前
跨域问题解决方案:开发代理
前端·javascript·面试
前端_逍遥生7 分钟前
Chrome 插件开发到发布完整指南:从零开始打造 TTS 朗读助手
前端·chrome
JohnYan7 分钟前
Bun技术评估 - 07 S3
javascript·后端·bun
Mintopia8 分钟前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
天涯学馆9 分钟前
JavaScript 跨域、事件循环、性能优化面试题解析教程
前端·javascript·面试
掘金一周18 分钟前
别再用 100vh 了!移动端视口高度的终极解决方案| 掘金一周7.3
前端·后端
晴殇i20 分钟前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
咚咚咚ddd22 分钟前
cursor mcp实践:网站落地页性能检测报告(browser-tools)
前端
MiyueFE23 分钟前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript