快捷導(dǎo)航

詳解vue2.0的Element UI的表格table列時(shí)間戳格式化

更新時(shí)間：2017年06月13日 17:18:12 作者：楓似

本篇文章主要介紹了詳解vue2.0的Element UI的表格table列時(shí)間戳格式化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

這兩天學(xué)習(xí)了vue2.0的Element UI的表格table列時(shí)間戳格式化，所以，今天添加一點(diǎn)小筆記。

表格屬性

<el-table 
        :data="tableData" 
        v-loading.body="loading" 
        border 
        @selection-change="selectionChange" 
        style="width: 100%"> 
      <el-table-column 
          prop="createTime" 
          label="創(chuàng)建時(shí)間" 
          :formatter="dateFormat" 
          width="150"> 
      </el-table-column> 
      <el-table-column 
          prop="updateTime" 
          label="更新時(shí)間" 
          width="150"> 
      </el-table-column>       
    </el-table>

script

new Vue({ 
    el: '#tableView', 
    data: { 
      //列表數(shù)據(jù) 
      tableData: [{ 
      "createTime":1491559642000, 
      "updateTime":1491559642000 
      }], 
    }, 
    methods:{ 
      //時(shí)間格式化 
      dateFormat:function(row, column) { 
        var date = row[column.property]; 
     if (date == undefined) { 
       return ""; 
     } 
     return moment(date).format("YYYY-MM-DD HH:mm:ss"); 
      } 
    } 
  });

簡(jiǎn)單來(lái)說(shuō)，vue組件傳入的方法函數(shù)應(yīng)該使用v-bind屬性綁定

時(shí)間格式化使用moent.js

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vuejs第十篇之vuejs父子組件通信
這篇文章主要介紹了Vuejs第十篇之vuejs父子組件通信的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
vue2.0s中eventBus實(shí)現(xiàn)兄弟組件通信的示例代碼
這篇文章主要介紹了vue2.0s中eventBus實(shí)現(xiàn)兄弟組件通信的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
vue2安裝tailwindcss的詳細(xì)步驟
這篇文章主要介紹了vue2安裝tailwindcss，本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-08-08
this.$router.push攜帶參數(shù)跳轉(zhuǎn)頁(yè)面的實(shí)現(xiàn)代碼
這篇文章主要介紹了this.$router.push攜帶參數(shù)跳轉(zhuǎn)頁(yè)面,this.$router.push進(jìn)行頁(yè)面跳轉(zhuǎn)時(shí)，攜帶參數(shù)有params和query兩種方式，本文結(jié)合實(shí)例代碼給大家詳細(xì)講解，需要的朋友可以參考下
2023-04-04
前端Vue全屏screenfull通用解決方案及原理詳細(xì)分析
這篇文章主要給大家介紹了關(guān)于前端Vue全屏screenfull通用解決方案及原理的相關(guān)資料,使用screenfull這一第三方庫(kù)可以實(shí)現(xiàn)更穩(wěn)定的全屏功能,需要的朋友可以參考下
2024-10-10
vue.js中ref和$refs的使用及示例講解
這篇文章主要給大家介紹了關(guān)于vue.js中ref和$refs使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
vue如何通過(guò)事件的形式調(diào)用全局組件
這篇文章主要介紹了vue如何通過(guò)事件的形式調(diào)用全局組件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-09-09
vue3中如何使用live2D
本文介紹了如何在Vue3項(xiàng)目中整合Live2D技術(shù),從Live2D的基本介紹到在Vue3中的具體實(shí)現(xiàn)方法,Live2D技術(shù)允許開(kāi)發(fā)者將二維圖像轉(zhuǎn)化為可動(dòng)畫的三維模型,主要應(yīng)用于游戲、虛擬角色等領(lǐng)域,文章詳細(xì)說(shuō)明了在vue3項(xiàng)目中使用Live2D的步驟,感興趣的朋友一起看看吧
2024-10-10
vue3使用svg圖標(biāo)的方式總結(jié)
在Vue?3中，可以使用多種方式來(lái)使用SVG圖標(biāo)，這篇文章主要為大家總結(jié)了五個(gè)常用的方式，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解下
2023-08-08
基于vue封裝一個(gè)帶眼睛的密碼子組件
這篇文章給大家介紹了基于vue封裝一個(gè)帶眼睛的密碼子組件的方法,文章中有詳細(xì)的代碼講解,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2023-09-09