react ant add/change created_at

这篇具有很好参考价值的文章主要介绍了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)

react ant add/change created_at,前端,javascript,react,form

 文章来源地址https://www.toymoban.com/news/detail-632524.html

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

};

到了这里,关于react ant add/change created_at的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Ant react 组件报错解决整理 4.4

    1、[antd: Drawer] `visible` is deprecated which will be removed in next major version, please use `open` instead. 解决:将Drawer组件 visble 改为 open; 2、[antd: Descriptions] Sum of column `span` in a line not match `column` of Descriptions.  解决:默认一行显示三个,一个占位一行,如果想占多列,请使用表格。 3、[a

    2024年02月12日
    浏览(39)
  • 【React】Ant Design自定义主题风格及主题切换

    Ant Design 的自定义主题,对于刚入手的时候感觉真是一脸蒙圈,那今天给它梳理倒腾下; 整体样式变化,主要两个部分: https://ant.design/docs/react/customize-theme-cn#theme 官方介绍一大堆,咱们粗暴点就当作 key=value 配置内容来看和理解! 大体分为四块配置项: 分类 涉及配置项 通

    2024年04月22日
    浏览(40)
  • 为React Ant-Design Table增加字段设置

    最近做的几个项目经常遇到这样的需求,要在表格上增加一个自定义表格字段设置的功能。就是用户可以自己控制那些列需要展示。 在几个项目里都实现了一遍,每个项目的需求又都有点儿不一样,迭代了很多版,所以抽时间把这个功能封装了个组件:@silverage/table-custom,将

    2024年02月05日
    浏览(59)
  • React——Ant Design组件库Message全局提示的使用

    官网推荐使用Hook调用的方法         这种方法只能在本页显示,如果显示后跳转页面就不会显示。因为{contextHolder}是写在本页面的。如果需要跳转页面可以用promise调用 传递的参数依次为,提示信息、显示时间、关闭后触发的回调

    2024年02月11日
    浏览(44)
  • react-quill富文本 中文输入法触发change问题

    使用的富文本是编辑器 react-quill 需求: 点击按钮插入自定义颜色文字,然后手动输入为正常颜色。 问题: quill组件把带颜色的字体创建个dom, 临近的文字都会整合进一个dom中,导致输入的文字和插入的带颜色 都统一成一个颜色了。 中文输入拼音阶段就开始触发change事件,在

    2024年02月09日
    浏览(35)
  • React 基于Ant Degisn 实现table表格列表拖拽排序

     代码:

    2024年01月18日
    浏览(44)
  • 使用 create-react-app 创建 react 应用

    第一步 :全局安装: npm install -g create-react-app 第二步 :切换到想创建项目的目录,使用命令 create-react-app hello-react 第三步 :进入项目目录, cd hello-react 第四步 :启动项目, npm start 其中,public/index.htm,src/App.js,src/index.js 三个是最重要的文件。 public/index.html src/index.js 注意

    2024年01月25日
    浏览(45)
  • 【React】02.create-react-app基础操作

    2023年最新珠峰React全家桶【react基础-进阶-项目-源码-淘系-面试题】 有利于团队协作开发 便于组件的复用:提高开发效率、方便后期维护、减少页面中的冗余代码 业务组件:正对项目需求封装的 普通业务组件:没有啥复用性,只是单独拆出来的一个模块 通用业务组件:具备

    2024年02月06日
    浏览(44)
  • 使用create-react-app创建react项目

    全局安装create-react-app 使用create-react-app创建一个项目 如果不想全局安装,可以直接使用npx 这需要等待一段时间,这个过程实际上会安装三个东西 react: react的顶级库 react-dom: 因为react有很多的运行环境,比如app端的react-native, 我们要在web上运行就使用react-dom react-scripts: 包含运

    2024年02月11日
    浏览(38)
  • react ant-design实现导航菜单menu的路由设置/切换页面

    ant-design版本是5.1.1,路由版本是v6的 新版本的导航菜单路由设置与旧版的不太一样,刚开始的时候甚至不知道该怎么写 实现效果: 代码: 首先,给导航菜单的menu添加点击事件 修改item,通过设置点击事件获取点击后的key值(key值即路由跳转的页面) 打印出来看看 获取到的

    2024年02月12日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包