详解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 Object的extend是一个常用的功能
Dec 02 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
Jquery中map函数的用法
Jun 03 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 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 Pear 安装及使用
2009/03/19 PHP
YII路径的用法总结
2014/07/09 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
详解package.json版本号规则
2019/08/01 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
Python生成不重复随机值的方法
2015/05/11 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
python怎么调用自己的函数
2020/07/01 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
找工作最新求职信
2013/12/22 职场文书
元旦获奖感言
2014/03/08 职场文书
高考备战决心书
2014/03/11 职场文书
统计专业自荐书
2014/07/06 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
陪护人员误工证明
2015/06/24 职场文书
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python