使用React+Antd遇到的Table组件时间格式化的问题

我在开发react项目时使用antdUI进行开发,遇到了对时间格式化的问题,下面是我成功格式化的解决办法

在使用antd的时候要想修改table里面的内容需要用到render属性

// 我这边是hooks
import moment from 'moment';
export default (props: any) => {const formatterTime = (val) => {return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : '';};const columns: any = [{title: `${entryName}`,dataIndex: 'projectName',key: 'projectName',ellipsis: true,},{title: `${t('created-by')}`,dataIndex: 'creatorName',key: 'creatorName',ellipsis: true,},{title: `${creationTime}`,dataIndex: 'created',key: 'created',ellipsis: true,render: formatterTime, //在这里调用就可以实现时间格式化},{title: `${type}`,dataIndex: 'status',key: 'status',render: (text) => (<span>{/* 0 已发布,1 待审核,2 已退回*/}{text == '0'? `${t('published')}`: text == '1'? `${t('pending-approval')}`: `${t('returned')}`}</span>),},{title: `${t('bottom-operation')}`,dataIndex: 'operation',key: 'operation',align: 'center',width: 280,render: (_, record) => (<Space size="middle"><a className="see border_bottom">{t('pass')} </a><a className="close border_bottom">{t('return')}</a><a className="see border_bottom" onClick={() => onSee(record)}>{t('see')}</a><a className="close border_bottom">{t('close')}</a><aclassName="codeWord border_bottom"onClick={() => onPasswordSet(record)}>{t('password-set')}</a></Space>),},];
}

ant-design,解决格式化Table中的时间相关推荐

Ant Design + react-drag-listview实现Table拖拽变换列位置
Ant Design + react-drag-listview实现Table拖拽变换列位置 Ant Design + react-drag-listview + react-resizable 实现 ...
Ant Design Vue 的 table 隐藏特定列
Ant Design Vue 的 table 隐藏特定列 Ant Design Vue 的 table 隐藏列主要是通过列的 colSpan属性和 customRender 实现的,这两个属性官网的 ...
react 日期怎么格式化_react中日期时间格式化
项目开发过程当中,总会遇到这样那样的时间格式化问题,那么在react中,日期时间格式化该怎么解决??react 一种是直接使用插件 moment,方便快捷完美的解决时间格式化问题:npm 另外一种是, ...
ant design vue 表格table 默认选择几项getCheckboxProps
首先我们看一下场景在table组件里默认选择第一项,如下图所示: 查看table文档后发现只有getCheckboxProps或许能修改checkbox 文档说是一个函数,然后就写一个方法,有一个默认 ...
ant design vue input change_vue中关于$emit用法的笔记
在 index.html 中引用了 input.vue 中的 <g-input>,如下 1.index.html <div id="app"><g-i ...
ant design 监听Table 组件滚动到底部
import React, { useRef, forwardRef, useState, useEffect } from 'react' import { useMount, useMouse, ...
python linux 时间格式化,Python中的时间日期转换
Python关于时间日期有两个库datetime和time,于是我们要在四种格式之间转换: datetime.datetime对象 datetime.datetime.now() time.struc ...
Ant Design of Vue表格中slot-scope=“text, record”
1.需求:单元格中的内容需要循环渲染,如图 2.后台返回的数据格式为: 3.刚开始使用的是这样: <template slot="conditionsArr" slot-sc ...
ant design vue给table设置斑马条纹样式
效果图 <a-table :columns="columns" :data-source="data"></a-table> css设置 ...

ant-design,解决格式化Table中的时间

使用React+Antd遇到的Table组件时间格式化的问题

ant-design,解决格式化Table中的时间相关推荐

最新文章

热门文章