Vue?el-table組件怎么實現將日期格式化

本篇內容介紹了“Vue el-table組件怎么實現將日期格式化”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

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

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

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

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

原文規定了標準的日期-時間表示方法，即，當日期和實踐合并表示時，需要在時間前面加一大寫字母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="協議創建時間" align="center"  prop="createdAt" width="200%">
                        
              <template slot-scope="scope">
                {{timeTranslate(scope.row.createdAt)}}
              </template>
                    </el-table-column>

成功顯示 

“Vue el-table組件怎么實現將日期格式化”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！