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 相关文章推荐
js 代码优化点滴记录
Feb 19 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
JS中表单的使用小结
Jan 11 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
vue elementUI批量上传文件
Apr 26 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
Python代码需要缩进吗
2020/07/01 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
房地产员工找工作的自我评价
2013/11/15 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
工地食品安全责任书
2015/05/09 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server