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 相关文章推荐
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
vue项目中axios使用详解
Feb 07 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
基于JavaScript实现随机点名器
Feb 25 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扩展介绍与开发教程
2010/08/19 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php实现简单爬虫的开发
2016/03/28 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
Python内置函数之filter map reduce介绍
2014/11/30 Python
python生成随机mac地址的方法
2015/03/16 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
python之mock模块基本使用方法详解
2019/06/27 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
对Python函数设计规范详解
2019/07/19 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
基于python操作ES实例详解
2019/11/16 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
婚礼主持词
2014/03/13 职场文书
经典安踏广告词
2014/03/21 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
找规律教学反思
2016/02/23 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript