详解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 相关文章推荐
javascript下过滤数组重复值的代码
Sep 10 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
alert和confirm功能介绍
May 21 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
ES6对象操作实例详解
May 23 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跨站攻击实例分析
2014/10/28 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
Python装饰器decorator用法实例
2014/11/10 Python
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
Python操作Excel之xlsx文件
2017/03/24 Python
详解python3中zipfile模块用法
2018/06/18 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
python如何编写win程序
2020/06/08 Python
幼儿园小班教师寄语
2014/04/03 职场文书
机械系毕业生求职信
2014/05/28 职场文书
施工安全责任书范本
2014/07/24 职场文书
弄虚作假心得体会
2014/09/10 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
地道战观后感400字
2015/06/04 职场文书
征求意见函
2015/06/05 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
Python实现byte转integer
2021/06/03 Python
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL