ElementUI中对el-table的某一列的时间进行格式化

以你之姓@ 2023-10-05 12:09 61阅读 0赞

## 场景 ##

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

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

在此列上添加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 ;
        }

### 效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201021141640623.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70