el-table后端返回日期2023-04-07T09:10:47.000+00:00格式转换

最新推荐文章于 2024-06-26 11:06:07 发布

只差亿点点

最新推荐文章于 2024-06-26 11:06:07 发布

阅读量1k

点赞数

文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/weixin_67898309/article/details/130064257

版权

一：

首先el-table有个属性 :formatter="formatTime"

加在需要显示时间的地方

然后再methods中定义formatTime方法

 // 时间格式化
    formatTime(row, column) {
      let data = row[column.property];
      let dtime = new Date(data);
      const year = dtime.getFullYear();
      let month = dtime.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      let day = dtime.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      let hour = dtime.getHours();
      if (hour < 10) {
        hour = "0" + hour;
      }
      let minute = dtime.getMinutes();
      if (minute < 10) {
        minute = "0" + minute;
      }
      let second = dtime.getSeconds();
      if (second < 10) {
        second = "0" + second;
      }
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },

最后页面看到的时间

二：

使用插值法转换时间格式

页面效果：

代码：

在methods中定义一个事件formatDate：

    formatDate(date) {
        let newDate = new Date(date);
        const year = newDate.getFullYear();
      let month = newDate.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      let day = newDate.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      let hour = newDate.getHours();
      if (hour < 10) {
        hour = "0" + hour;
      }
      let minute = newDate.getMinutes();
      if (minute < 10) {
        minute = "0" + minute;
      }
      let second = newDate.getSeconds();
      if (second < 10) {
        second = "0" + second;
      }
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },

然后在要用到时间的地方调用：

        <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-time"></i>
              处理时间
            </template>
            {{formatDate(this.tableData.endTime) }}
            //this.tableData.endTime为没转换前的时间格式，替换就行
          </el-descriptions-item>