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 backgroundImage控制
May 19 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
jQuery插件开发汇总
May 15 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 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
php.ini中文版
2006/10/09 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
PHP网络操作函数汇总
2015/05/18 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
Python中字典的基础知识归纳小结
2015/08/19 Python
python如何让类支持比较运算
2018/03/20 Python
python实现学员管理系统
2019/02/26 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
Linux机考试题
2015/10/16 面试题
JAVA中运算符的分类及举例
2015/09/12 面试题
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
餐厅筹备计划书
2014/04/25 职场文书
IT工程师岗位职责
2014/07/04 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
运动会新闻报道稿
2015/07/22 职场文书
求职自我评价参考范文
2019/05/16 职场文书