Vue el-table組件如何實(shí)現(xiàn)將日期格式化
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，全稱(chēng)為《數(shù)據(jù)存儲(chǔ)和交換形式·信息交換·日期和時(shí)間的表示方法》。
原文規(guī)定了標(biāo)準(zhǔn)的日期-時(shí)間表示方法，即，當(dāng)日期和實(shí)踐合并表示時(shí)，需要在時(shí)間前面加一大寫(xiě)字母T，如要表示北京時(shí)間2004年5月3日下午5點(diǎn)30分8秒，可以寫(xiě)成 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中寫(xiě)一個(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>成功顯示
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue返回值動(dòng)態(tài)生成表單及提交數(shù)據(jù)的辦法
這篇文章主要為大家介紹了Vue返回值動(dòng)態(tài)生成表單及提交數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
vue 使用 echarts 繪制中國(guó)地圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 使用 echarts 繪制中國(guó)地圖,內(nèi)容包括插入echarts所需模塊及完整的代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了vue數(shù)組去重的12種方法示例全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了Vue.js之mixins混合組件詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
Vue源碼中要const _toStr = Object.prototype.toString的原因分析
這篇文章主要介紹了Vue源碼中要const _toStr = Object.prototype.toString的原因分析,在文中給大家提到了Object.prototype.toString方法的原理,需要的朋友可以參考下2018-12-12
Vue發(fā)送Formdata數(shù)據(jù)及NodeJS接收方式
這篇文章主要介紹了Vue發(fā)送Formdata數(shù)據(jù)及NodeJS接收方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue自定義一個(gè)v-model的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue自定義一個(gè)v-model的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
vue路由緩存的幾種實(shí)現(xiàn)方式小結(jié)
這篇文章主要介紹了vue路由緩存的幾種實(shí)現(xiàn)方式,結(jié)合實(shí)例形式詳細(xì)分析了vue.js路由緩存常見(jiàn)實(shí)現(xiàn)方式、使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
vue?實(shí)現(xiàn)滑動(dòng)塊解鎖示例詳解
這篇文章主要為大家介紹了vue?實(shí)現(xiàn)滑動(dòng)塊解鎖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue中echarts關(guān)系圖動(dòng)態(tài)增刪節(jié)點(diǎn)以及連線(xiàn)方式
這篇文章主要介紹了vue中echarts關(guān)系圖動(dòng)態(tài)增刪節(jié)點(diǎn)以及連線(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07