后端返回带T时间格式

我的椰子啊

已于 2022-08-04 19:42:32 修改

阅读量3.3k

点赞数 4

分类专栏： Element UI vue 文章标签：前端 vue.js

于 2022-07-26 10:54:52 首次发布

本文链接：https://blog.csdn.net/weixin_48215380/article/details/125990181

版权

vue 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

Element UI

8 篇文章 0 订阅

订阅专栏

本文介绍了两种方法来解决后端返回的时间数据中包含'T'格式的问题，以便在前端页面上正确展示。第一种方法是利用ElementUI的表格组件的formatter属性，将'T'替换为空格。第二种方法是在模板中使用v-if和replace方法直接替换'T'。这两种方案都可以有效地在前端展示不带'T'的时间。

摘要由CSDN通过智能技术生成

方案一：

关于后端返回时间格式带T问题
有时候后端在返回时间数据的时候会格式化一次，前端接收到的数据就是带T格式的，页面展示的时候肯定不要这个带T的，所以需要我们处理一下在进行展示
这个是返回数据的效果图（带T的）
我用的elementUI的表格组件，里边有**formatter**属性，借助这个属性将T替换掉。
可以直接看代码

<el-table-column
  align="center"
  prop="lastSyncTime"
  label="最新同步时间"
  show-overflow-tooltip
  :formatter="formatter"/>
// 借助formatter对该列数据进行编写

methods:{
    formatter (row) {
      const zoneDate = new Date(row.lastSyncTime).toJSON()
      const date = new Date(+new Date(zoneDate) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      return date
    }
}

方案二

利用replace去除T用空格代替可以用v-if判断一下

<el-table-column
              align="center"
              label="最新同步时间"
              show-overflow-tooltip>
              <template v-slot="{row}">
                <span v-if="row.lastSyncTime!==null">{{row.lastSyncTime.replace('T',' ')}}</span>
                <span v-else>{{row.lastSyncTime}}</span>
              </template>
</el-table-column>