el-table-column格式化处理时间

最新推荐文章于 2024-04-11 11:32:45 发布

Ming_天你好

最新推荐文章于 2024-04-11 11:32:45 发布

阅读量467

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46402963/article/details/128994547

版权

收到的后端数据格式 2022-07-08T08:58:08+0000（国际标准化组织的国际标准——ISO 8601）

想要展示的数据格式 2023-02-10 18:54:26（标准时间）

处理方式1：使用:formatter进行处理

html代码：

<el-table-column align="center" prop="createTime" sortable label="申请时间"  min-width="130"  :formatter="formatDate">  </el-table-column>

js代码：

 function   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()
    }

处理方式2：使用template进行处理，优点：可以自定义，比如在前面加入icon图标、

html代码：

<el-table-column align="center" prop="createTime" sortable label="申请时间"
                       min-width="130">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{ getSimpleDate(new Date(scope.row.createTime)) }}</span>
        </template>
</el-table-column>

<!--      new Date(scope.row.createTime)是将收到的时间转换为中国标准时间    -->

js代码：

//中国标准时间转换为标准时间
function getSimpleDate(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      var h = date.getHours();
      var minute = date.getMinutes();
      minute = minute < 10 ? ('0' + minute) : minute;
      var s = date.getSeconds();
      s = s < 10 ? '0' + s : s;
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s;
    }

效果：