element-ui 表格数据时间格式化的方法


Posted in Javascript onAugust 24, 2018

后台返回时间格式  /1470220594000/

在element-ui  table 如何格式化呢 

1.首先

<el-table-column prop="AuditEndTime" label="处理时间" width="120" :formatter="dateFormat" align="center"></el-table-column>
 

主要是:formatter="dateFormat" 这个属性 

formatter 用来格式化内容 Function(row, column, cellValue, index)  

然后在   methods 方法对象里  添加 如下方法

//时间格式化
      dateFormat(row, column, cellValue, index){
          const daterc = row[column.property]
          if(daterc!=null){
            const dateMat= new Date(parseInt(daterc.replace("/Date(", "").replace(")/", ""), 10));
           const year = dateMat.getFullYear();
          const month = dateMat.getMonth() + 1;
          const day = dateMat.getDate();
          const hh = dateMat.getHours();
          const mm = dateMat.getMinutes();
          const ss = dateMat.getSeconds();
          const timeFormat= year + "/" + month + "/" + day + " " + hh + ":" + mm + ":" + ss;
          return timeFormat;
          }
          
      }

格式化后:

2018/2/27 8:59:19

PS:Element UI的表格table列的宽度自适应设置

不要设置  width="110px"

<el-table-column prop="login_id" align="center" label="工号"> </el-table-column>

<el-table-column prop="login_id" width="110px" align="center" label="工号"> </el-table-column>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
微信小程序入门之指南针
Oct 22 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue select选择框数据变化监听方法
Aug 24 #Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 #Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 #jQuery
element-ui中的select下拉列表设置默认值方法
Aug 24 #Javascript
vue 登录滑动验证实现代码
Aug 24 #Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 #Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 #Javascript
You might like
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
很可爱的输入框
2008/08/03 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
详解webpack 热更新优化
2018/09/13 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
超级实用的8个Python列表技巧
2020/08/24 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
《桃林那间小木屋》教学反思
2014/05/01 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
2015年底工作总结范文
2015/05/15 职场文书
亮剑观后感600字
2015/06/05 职场文书
微信早安问候语
2015/11/10 职场文书
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
python实现双链表
2022/05/25 Python