详解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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
php微信公众号开发之简答题
2018/10/20 PHP
laravel请求参数校验方法
2019/10/10 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
Python 数据结构之队列的实现
2017/01/22 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
什么是设计模式
2012/06/17 面试题
为什么要用EJB
2014/04/17 面试题
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
学校督导评估方案
2014/06/10 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
2015教师节通讯稿
2015/07/20 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
MySQL sql_mode的使用详解
2021/05/08 MySQL
java如何实现socket连接方法封装
2021/09/25 Java/Android
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis