详解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 相关文章推荐
js表格分页实现代码
Sep 18 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 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 switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
python实现图片批量压缩程序
2018/07/23 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
Python extract及contains方法代码实例
2020/09/11 Python
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
中专生求职自荐信范文
2013/12/22 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
学校就业保障协议书
2019/06/24 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
Go 语言中 20 个占位符的整理
2021/10/16 Golang
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript