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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
在linux中使用包管理器安装node.js
Mar 13 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
微信小程序实现菜单左右联动
May 19 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
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
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
详解supervisor使用教程
2017/11/21 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
python和go语言的区别是什么
2020/07/20 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
药剂专业学生求职信范文
2013/12/28 职场文书
安全月活动总结
2014/05/05 职场文书
保护黄河倡议书
2014/05/16 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书