elementui之el-table-column日期格式顯示方式
更新時間：2024年12月24日 16:59:40 作者：在奮斗的大道
文章介紹了如何使用formatter屬性對表格某一列的內容進行日期格式化,通過綁定日期格式化的方法實現,展示了前端代碼的模板和方法,并給出了前端效果的展示
elementui el-table-column日期格式顯示
如果想對表格某一列的內容進行日期格式化，可用 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) {
// 獲取單元格數據
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()
},前端效果展示
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
最近vue.js 非?；馃幔【幰渤脵C學習了下vuejs的一些基礎知識，于是嘗試做一個像微信平臺里的菜單編輯器功能，下面腳本之家小編把vue.js 微信公眾號菜單編輯器功能的實現代碼分享給大家，需要的朋友參考下2018-05-05
這篇文章主要介紹了基于vue實現的圓形菜單欄組件，本文通過實例代碼，圖文詳解的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了使用D3.js+Vue實現一個簡單的柱形圖,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了解決vuex刷新狀態(tài)初始化的方法實現,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
如果我們在每個組件中去重復定義這些屬性和方法會使得項目出現代碼冗余并提高了維護難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2021-08-08
詳解如何在 vue 項目里正確地引用 jquery 和 jquery-ui的插件
本篇文章主要介紹了詳解如何在 vue 項目里正確地引用 jquery 和 jquery-ui的插件，具有一定的參考價值，有興趣的可以了解一下2017-06-06
這篇文章主要介紹了Vue2.x 的雙向綁定原理，Vue 是利用的 Object.defineProperty() 方法進行的數據劫持，利用 set、get 來檢測數據的讀寫。需要的朋友可以參考下面文章的具體內容2021-09-09
這篇文章主要介紹了Vue在頁面右上角實現可懸浮/隱藏的系統菜單,實現思路大概是通過props將showCancel這個Boolean值傳遞到子組件，對父子組件分別綁定事件，來控制這個系統菜單的顯示狀態(tài)。需要的朋友可以參考下2018-05-05
本篇文章主要介紹了詳解vue 中使用 AJAX獲取數據的方法，在VUE開發(fā)時，數據可以使用jquery和vue-resource來獲取數據，有興趣的可以了解一下。2017-01-01
Vue3中的ref是一種創(chuàng)建響應式引用的方式,它在Vue生態(tài)系統中扮演著重要角色,下面這篇文章主要給大家介紹了關于Vue中動態(tài)綁定Ref的兩種方式,需要的朋友可以參考下2024-09-09