elementUI中table中自定义修改时间格式2020-10-26T10:00:00

最新推荐文章于 2023-09-13 17:50:40 发布

重名8080

最新推荐文章于 2023-09-13 17:50:40 发布

阅读量987

点赞数 2

文章标签： python java html mysql vue

本文链接：https://blog.csdn.net/weixin_55560445/article/details/114420041

版权

问题描述：

前端使用el-table查询到后台的数据的某一列时间列默认是标准UTC格式，如果想按照自己想显示的格式获取年月日和时分秒进行显示怎么办？

方法一：

elementUI中的table提供了formatter这个属性来对传入的数据进行用户自定义的格式化

<el-table-column show-overflow-tooltip prop="crteTime" :formatter="formatDate" label="创建时间" min-width="150" align="center" />

formatDate(row, column) {
  function addDateZero(num) {
        return (num < 10 ? "0" + num : num);
    }
    let d = new Date(row.crteTime);
    let formatdatetime = d.getFullYear() + '-' + addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate()) + ' ' + addDateZero(d.getHours()) + ':' + addDateZero(d.getMinutes()) + ':' + addDateZero(d.getSeconds());
    return formatdatetime; //返回给前台页面的值
}

方法二：

在此列上添加template,显示的内容调用函数parseDateFull，参数为后台返回的时间。

<el-table-column
   label="处理时间"
   align="center"
   prop="clsj"
   width="180"
>
    <template slot-scope="scope">
        <span>{{ parseDateFull(scope.row.clsj) }}</span>
    </template>
</el-table-column>

//然后定义函数parseDateFull的实现 
parseDateFull(time) {
      var x = new Date(time);
      var z = {
        y: x.getFullYear(),
        M: x.getMonth() + 1,
        d: x.getDate(),
        h: x.getHours(),
        m: x.getMinutes(),
        s: x.getSeconds(),
      };
      if (z.M < 10) {
        z.M = "0" + z.M;
      }
      if (z.d < 10) {
        z.d = "0" + z.d;
      }
      if (z.h < 10) {
        z.h = "0" + z.h;
      }
      if (z.m < 10) {
        z.m = "0" + z.m;
      }
      return z.y + "-" + z.M + "-" + z.d + " " + z.h + ":" + z.m ;
    }

方法三：

在遍历的时候执行一个函数，将后台返回的毫秒数转换为指定的格式显示：

<el-table-column
   label="处理时间"
   align="center"
   prop="time"
   width="180"
>
    <template slot-scope="scope">
        <span>{{time | formateDate1}}</span>
    </template>
</el-table-column>

/*转换时间格式*/
filters:{//如下这样写
      //转换时间格式
      formateDate1(time){ 
          var datetime = time
          function addDateZero(num) {
              return (num < 10 ? "0" + num : num);
          }
          let d = new Date(datetime);
          let formatdatetime = d.getFullYear() + '-' + addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate()) + ' ' + addDateZero(d.getHours()) + ':' + addDateZero(d.getMinutes()) + ':' + addDateZero(d.getSeconds());
         if(datetime){
            return formatdatetime; //返回给前台页面的值
          }
      }
    },