Vue el-table組件如何實現(xiàn)將日期格式化
更新時間：2023年04月13日 09:15:45 作者：Hemist
這篇文章主要介紹了Vue el-table組件如何實現(xiàn)將日期格式化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue el-table組件將日期格式化
項目需要實現(xiàn)一個將后端時間數(shù)據(jù)顯示在前端 Table 中的場景，但后端響應的數(shù)據(jù)并不是我們想要的規(guī)范格式，因此，需要前端來格式化這個時間變量。
從后端拿到的數(shù)據(jù)如下所示。
{
?? ?// 省略不必要的字段；
?? ?"created_at": "2022-07-08T08:58:08+0000",
? ? "updated_at": "2022-07-08T08:58:10+0000",
?? ?// 省略不必要的字段
}這種時間格式來自于國際標準化組織的國際標準——ISO 8601，全稱為《數(shù)據(jù)存儲和交換形式·信息交換·日期和時間的表示方法》。
原文規(guī)定了標準的日期-時間表示方法，即，當日期和實踐合并表示時，需要在時間前面加一大寫字母T，如要表示北京時間2004年5月3日下午5點30分8秒，可以寫成 2004-05-03T17:30:08+08:00 或 20040503T173008+08。
格式化時間字符串的 js 方法如下所示：
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()
}當然，在表格中需要雙向綁定一下。
<el-table> ?? ?<el-table-column ? ? ? ? label="提交時間" ? ? ? ? min-width="15%" ? ? ? ? align="center" ? ? ? ? prop="createdTime" ? ? ? ? :formatter="formatDate"> ? ? </el-table-column> </el-table>
這樣一來，時間就可以正常顯示了。
vue對時間進行格式化輸出,以el-table為例
后端返回的時間數(shù)據(jù)格式為：
2022-07-05T09:57:39.000Z
需要格式化為：
2018-08-07 00:00:00
解決方法
安裝dayjs包
npm install dayjs -s
在需要格式化時間的頁面引入，也可以全局引入，我這里在單頁面引入：
import dayjs from "dayjs"
在methods中寫一個轉換方法：
methods:{
?timeTranslate (val) {
? ? return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
?},
}這里我是放在el-table中顯示的
?? ??? ??? ?<el-table-column label="協(xié)議創(chuàng)建時間" align="center" ?prop="createdAt" width="200%">
?? ??? ??? ??? ??? ??? ?
? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? {{timeTranslate(scope.row.createdAt)}}
? ? ? ? ? ? ? </template>
?? ??? ??? ??? ??? ?</el-table-column>成功顯示
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
鼠標移入時的小手、鼠標點擊時按鈕下壓彈起的動畫、觸屏應用點擊時的屏幕震動，這些效果也被統(tǒng)稱為點擊反饋，雖然看似是應用中的細枝末節(jié)，但是只要稍微投入一點點心思，帶來的用戶體驗提升是十分明顯的,這里作者為小伙伴們推薦一種作者最喜歡的點擊反饋效果。2021-05-05
這篇文章主要介紹了Element Tooltip 文字提示的使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
Vue2實現(xiàn)圖片的拖拽,縮放和旋轉效果的示例代碼
這篇文章主要為大家介紹了如何基于vue2?實現(xiàn)圖片的拖拽、旋轉、鼠標滾動放大縮小等功能。文中的示例代碼講解詳細，感興趣的小伙伴可以嘗試一下2022-11-11
options是new Vue的參數(shù),我們一般稱之為選項或者構造選項,下面這篇文章主要給大家介紹了關于Vue中options選項的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了基于Vue.js的移動組件庫cube-ui，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了vue3中Hook使用以及Hook結合自定義指令方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue中cookies的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)勻速輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
vue使用ajax獲取后臺數(shù)據(jù)進行顯示的示例
今天小編就為大家分享一篇vue使用ajax獲取后臺數(shù)據(jù)進行顯示的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了通過圖帶你深入了解vue的響應式原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，2019-06-06