详解vue2.0的Element UI的表格table列时间戳格式化


Posted in Javascript onJune 13, 2017

这两天学习了vue2.0的Element UI的表格table列时间戳格式化,所以,今天添加一点小笔记。

表格属性

<el-table 
        :data="tableData" 
        v-loading.body="loading" 
        border 
        @selection-change="selectionChange" 
        style="width: 100%"> 
      <el-table-column 
          prop="createTime" 
          label="创建时间" 
          :formatter="dateFormat" 
          width="150"> 
      </el-table-column> 
      <el-table-column 
          prop="updateTime" 
          label="更新时间" 
          width="150"> 
      </el-table-column>       
    </el-table>

script

new Vue({ 
    el: '#tableView', 
    data: { 
      //列表数据 
      tableData: [{ 
      "createTime":1491559642000, 
      "updateTime":1491559642000 
      }], 
    }, 
    methods:{ 
      //时间格式化 
      dateFormat:function(row, column) { 
        var date = row[column.property]; 
     if (date == undefined) { 
       return ""; 
     } 
     return moment(date).format("YYYY-MM-DD HH:mm:ss"); 
      } 
    } 
  });

简单来说,vue组件传入的方法函数应该使用v-bind属性绑定

时间格式化使用moent.js

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
2010年最佳jQuery插件整理
Dec 06 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
详解javascript中的事件处理
Nov 06 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
vue ssr 指南详读
Jun 29 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 #Javascript
vue时间格式化实例代码
Jun 13 #Javascript
详解vue slot插槽的使用方法
Jun 13 #Javascript
详解Vue.js分发之作用域槽
Jun 13 #Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 #Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 #Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 #Javascript
You might like
介绍一些PHP判断变量的函数
2012/04/24 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
Python continue语句用法实例
2014/03/11 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
解决Python一行输出不显示的问题
2018/12/03 Python
python中正则表达式与模式匹配
2019/05/07 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
学校食堂采购员岗位职责
2013/12/05 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
沈阳故宫导游词
2015/01/31 职场文书
医院合作意向书范本
2015/05/08 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python