elementui之el-table-column日期格式顯示方式
更新時間：2024年12月24日 16:59:40 作者：在奮斗的大道
文章介紹了如何使用formatter屬性對表格某一列的內(nèi)容進(jìn)行日期格式化,通過綁定日期格式化的方法實現(xiàn),展示了前端代碼的模板和方法,并給出了前端效果的展示
elementui el-table-column日期格式顯示
如果想對表格某一列的內(nèi)容進(jìn)行日期格式化，可用 formatter 屬性。
屬性綁定日期格式化的方法即可。
前端代碼之模板
<el-row>
<el-table :data="tableData" style="width: 100%;">
<el-table-column prop="title" label="通知標(biāo)題" >
</el-table-column>
<el-table-column prop="content" label="通知詳情" >
</el-table-column>
<el-table-column prop="addTime" label="添加時間" :formatter="formatDate" >
</el-table-column>
<el-table-column prop="adminId" label="管理員ID" >
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="toEdit(scope)">編輯</el-button>
<el-button type="danger" size="mini" @click="deleteRole(scope)">刪除</el-button>
</template>
</el-table-column>
</el-table>
<br>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagination.pageIndex"
:page-sizes="[5, 10, 20, 30, 40]"
:page-size=pagination.pageSize
layout="total, prev, pager, next"
:total=pagination.total>
</el-pagination>
</el-row>前端代碼之方法
//方法區(qū)
formatDate(row, column) {
// 獲取單元格數(shù)據(jù)
let data = row[column.property]
if(data == null) {
return null
}
let dt = new Date(data)
return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
},前端效果展示
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(一)
最近vue.js 非?；馃?，小編也趁機學(xué)習(xí)了下vuejs的一些基礎(chǔ)知識，于是嘗試做一個像微信平臺里的菜單編輯器功能，下面腳本之家小編把vue.js 微信公眾號菜單編輯器功能的實現(xiàn)代碼分享給大家，需要的朋友參考下2018-05-05
這篇文章主要介紹了基于vue實現(xiàn)的圓形菜單欄組件，本文通過實例代碼，圖文詳解的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了使用D3.js+Vue實現(xiàn)一個簡單的柱形圖,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了解決vuex刷新狀態(tài)初始化的方法實現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
如果我們在每個組件中去重復(fù)定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2021-08-08
詳解如何在 vue 項目里正確地引用 jquery 和 jquery-ui的插件
本篇文章主要介紹了詳解如何在 vue 項目里正確地引用 jquery 和 jquery-ui的插件，具有一定的參考價值，有興趣的可以了解一下2017-06-06
這篇文章主要介紹了Vue2.x 的雙向綁定原理，Vue 是利用的 Object.defineProperty() 方法進(jìn)行的數(shù)據(jù)劫持，利用 set、get 來檢測數(shù)據(jù)的讀寫。需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09
Vue在頁面右上角實現(xiàn)可懸浮/隱藏的系統(tǒng)菜單
這篇文章主要介紹了Vue在頁面右上角實現(xiàn)可懸浮/隱藏的系統(tǒng)菜單,實現(xiàn)思路大概是通過props將showCancel這個Boolean值傳遞到子組件，對父子組件分別綁定事件，來控制這個系統(tǒng)菜單的顯示狀態(tài)。需要的朋友可以參考下2018-05-05
詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法
本篇文章主要介紹了詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法，在VUE開發(fā)時，數(shù)據(jù)可以使用jquery和vue-resource來獲取數(shù)據(jù)，有興趣的可以了解一下。2017-01-01
Vue3中的ref是一種創(chuàng)建響應(yīng)式引用的方式,它在Vue生態(tài)系統(tǒng)中扮演著重要角色,下面這篇文章主要給大家介紹了關(guān)于Vue中動態(tài)綁定Ref的兩種方式,需要的朋友可以參考下2024-09-09