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 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
DWZ table的原生分页浅谈
2013/03/01 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
Python实现合并字典的方法
2015/07/07 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis