详解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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
UserData用法总结 lanyu出品
Jul 01 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 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中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
浅析Python requests 模块
2020/10/09 Python
服装机修工岗位职责
2013/12/26 职场文书
运动会入场词50字
2014/02/20 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android
如何Python使用re模块实现okenizer
2022/04/30 Python
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS
MySQL深分页问题解决思路
2022/12/24 MySQL