详解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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
JavaScript中的 new 命令
May 22 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 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获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
在Python中使用dict和set方法的教程
2015/04/27 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
使用Python来开发微信功能
2018/06/13 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
Python使用python-docx读写word文档
2019/08/26 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
Python排序函数的使用方法详解
2020/12/11 Python
Python爬取梨视频的示例
2021/01/29 Python
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
党校培训学习心得体会
2016/01/06 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android