详解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 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
JavaScript全局函数使用简单说明
Mar 11 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
详解Vite的新体验
Feb 22 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数据库操作类代码(增,删,改,查)
2013/04/08 PHP
PHP内核探索:变量概述
2014/01/30 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python时间日期操作方法实例小结
2020/02/06 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
应届生保险求职信
2013/11/11 职场文书
户外活动总结范文
2014/04/30 职场文书
生物学专业求职信
2014/07/23 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
校友回访母校寄语
2015/02/26 职场文书
离婚案件原告代理词
2015/05/23 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
深入浅析Django MTV模式
2021/09/04 Python
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android