详解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 继承详解(四)
Jul 13 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 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使用百度ping服务代码实例
2014/06/19 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python解析最简单的验证码
2016/01/07 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
python实现推箱子游戏
2020/03/25 Python
对python中dict和json的区别详解
2018/12/18 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
东方通信股份有限公司VC面试题
2014/08/27 面试题
商业房地产广告语
2014/03/13 职场文书
个人简历自荐信
2014/06/26 职场文书
ktv好的活动方案
2014/08/17 职场文书
社区植树节活动总结
2015/02/06 职场文书
优秀大学生自荐信
2015/03/26 职场文书
利用python做表格数据处理
2021/04/13 Python
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
python面向对象版学生信息管理系统
2021/06/24 Python