Vue el-table組件如何實現將日期格式化

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

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

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

項目需要實現一個將后端時間數據顯示在前端 Table 中的場景，但后端響應的數據并不是我們想要的規(guī)范格式，因此，需要前端來格式化這個時間變量。

從后端拿到的數據如下所示。

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

這種時間格式來自于國際標準化組織的國際標準——ISO 8601，全稱為《數據存儲和交換形式·信息交換·日期和時間的表示方法》。

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

格式化時間字符串的 js 方法如下所示：

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()
}

當然，在表格中需要雙向綁定一下。

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

這樣一來，時間就可以正常顯示了。

vue對時間進行格式化輸出,以el-table為例

后端返回的時間數據格式為：

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>

成功顯示