快捷導(dǎo)航

Vue el-table組件如何實(shí)現(xiàn)將日期格式化

更新時(shí)間：2023年04月13日 09:15:45 作者：Hemist

這篇文章主要介紹了Vue el-table組件如何實(shí)現(xiàn)將日期格式化問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue el-table組件將日期格式化

項(xiàng)目需要實(shí)現(xiàn)一個(gè)將后端時(shí)間數(shù)據(jù)顯示在前端 Table 中的場(chǎng)景，但后端響應(yīng)的數(shù)據(jù)并不是我們想要的規(guī)范格式，因此，需要前端來(lái)格式化這個(gè)時(shí)間變量。

從后端拿到的數(shù)據(jù)如下所示。

{
?? ?// 省略不必要的字段；
?? ?"created_at": "2022-07-08T08:58:08+0000",
? ? "updated_at": "2022-07-08T08:58:10+0000",
?? ?// 省略不必要的字段
}

這種時(shí)間格式來(lái)自于國(guó)際標(biāo)準(zhǔn)化組織的國(guó)際標(biāo)準(zhǔn)——ISO 8601，全稱為《數(shù)據(jù)存儲(chǔ)和交換形式·信息交換·日期和時(shí)間的表示方法》。

原文規(guī)定了標(biāo)準(zhǔn)的日期-時(shí)間表示方法，即，當(dāng)日期和實(shí)踐合并表示時(shí)，需要在時(shí)間前面加一大寫字母T，如要表示北京時(shí)間2004年5月3日下午5點(diǎn)30分8秒，可以寫成 2004-05-03T17:30:08+08:00 或 20040503T173008+08。

格式化時(shí)間字符串的 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()
}

當(dāng)然，在表格中需要雙向綁定一下。

<el-table>
?? ?<el-table-column
? ? ? ? label="提交時(shí)間"
? ? ? ? min-width="15%"
? ? ? ? align="center"
? ? ? ? prop="createdTime"
? ? ? ? :formatter="formatDate">
? ? </el-table-column>
</el-table>

這樣一來(lái)，時(shí)間就可以正常顯示了。

vue對(duì)時(shí)間進(jìn)行格式化輸出,以el-table為例

后端返回的時(shí)間數(shù)據(jù)格式為：

2022-07-05T09:57:39.000Z

需要格式化為：

2018-08-07 00:00:00

解決方法

安裝dayjs包

npm install dayjs -s

在需要格式化時(shí)間的頁(yè)面引入，也可以全局引入，我這里在單頁(yè)面引入：

import dayjs from "dayjs"

在methods中寫一個(gè)轉(zhuǎn)換方法：

methods:{
?timeTranslate (val) {
? ? return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
?},
}

這里我是放在el-table中顯示的

?? ??? ??? ?<el-table-column label="協(xié)議創(chuàng)建時(shí)間" align="center" ?prop="createdAt" width="200%">
?? ??? ??? ??? ??? ??? ?
? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? {{timeTranslate(scope.row.createdAt)}}
? ? ? ? ? ? ? </template>
?? ??? ??? ??? ??? ?</el-table-column>

成功顯示