详解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脚本调试方法小结
Nov 24 Javascript
Prototype ObjectRange对象学习
Jul 19 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
点图片上一页下一页翻页效果
2008/07/09 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
python简单实现操作Mysql数据库
2018/01/29 Python
python迭代器常见用法实例分析
2019/11/22 Python
同事吵架检讨书
2014/02/05 职场文书
班长演讲稿范文
2014/04/24 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
谢师宴邀请函
2015/02/02 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
Java中使用Filter过滤器的方法
2021/06/28 Java/Android