Vue el-table组件如何实现将日期格式化
更新时间：2023年04月13日 09:15:45 作者：Hemist
这篇文章主要介绍了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>成功显示
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
鼠标移入时的小手、鼠标点击时按钮下压弹起的动画、触屏应用点击时的屏幕震动，这些效果也被统称为点击反馈，虽然看似是应用中的细枝末节，但是只要稍微投入一点点心思，带来的用户体验提升是十分明显的,这里作者为小伙伴们推荐一种作者最喜欢的点击反馈效果。2021-05-05
这篇文章主要介绍了Element Tooltip 文字提示的使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要为大家介绍了如何基于vue2 实现图片的拖拽、旋转、鼠标滚动放大缩小等功能。文中的示例代码讲解详细，感兴趣的小伙伴可以尝试一下2022-11-11
options是new Vue的参数,我们一般称之为选项或者构造选项,下面这篇文章主要给大家介绍了关于Vue中options选项的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了基于Vue.js的移动组件库cube-ui，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了vue3中Hook使用以及Hook结合自定义指令方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue中cookies的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要为大家详细介绍了vue实现匀速轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
今天小编就为大家分享一篇vue使用ajax获取后台数据进行显示的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了通过图带你深入了解vue的响应式原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，2019-06-06
最新评论