本篇内容介绍了“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组件怎么实现将日期格式化”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
