elementui之el-table-column日期格式顯示方式
更新時間：2024年12月24日 16:59:40 作者：在奮斗的大道
文章介紹了如何使用formatter屬性對表格某一列的內(nèi)容進行日期格式化,通過綁定日期格式化的方法實現(xiàn),展示了前端代碼的模板和方法,并給出了前端效果的展示
elementui el-table-column日期格式顯示
如果想對表格某一列的內(nèi)容進行日期格式化，可用 formatter 屬性。
屬性綁定日期格式化的方法即可。
前端代碼之模板
<el-row>
<el-table :data="tableData" style="width: 100%;">
<el-table-column prop="title" label="通知標題" >
</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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vant Weapp組件踩坑:picker的初始賦值解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
17個vue常用的數(shù)組方法總結(jié)與實例演示
這篇文章主要介紹了vue中常用的數(shù)組方法,包括：VUE數(shù)組轉(zhuǎn)換字符串，VUE數(shù)組遍歷，VUE數(shù)組過濾，VUE數(shù)組查詢,VUE數(shù)組排序等功能，需要的朋友可以參考下2022-12-12
在VSCode中添加好用的插件可以提高我們的開發(fā)效率,這些可以幫助我們格式化,擴充性,執(zhí)行最佳實踐的代碼方式,自動完成一些瑣碎的事情,下面這篇文章主要給大家推薦介紹了關于Vue3開發(fā)必備的六個VSCode插件,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue中按鈕操作完刷新頁面的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
響應式就是當對象本身(對象的增刪值)或者對象屬性(重新賦值)發(fā)生變化時,將會運行一些函數(shù),最常見的就是render函數(shù),下面這篇文章主要給大家介紹了關于Vue3響應式原理的相關資料,需要的朋友可以參考下2022-12-12
vue 使用iView組件中的Table實現(xiàn)定時自動滾動效果
要在css中設置table的高度,使數(shù)據(jù)過多時出現(xiàn)滾動條,將縱向設置為overflow-y: auto;橫向設置隱藏 overflow-x: hidden,接下來通過本文介紹vue使用iView組件中的Table實現(xiàn)定時自動滾動效果,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue中解決拖拽改變存在iframe的div大小時卡頓問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
最近在項目開發(fā)中碰到一個需求是在頁面中展示pdf預覽功能,下面這篇文章主要給大家介紹了關于Vue3項目中預覽并打印PDF的兩種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
vscode中prettier和eslint換行縮進沖突的問題
這篇文章主要介紹了vscode中prettier和eslint換行縮進沖突的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了淺談VUE中演示v-for為什么要加key，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01