Vue el-table 组件如何将日期格式化

项目需要实现一个将后端时间数据显示在前端 Table 中的场景，但后端响应的数据并不是我们想要的规范格式，因此，需要前端来格式化这个时间变量。从后端拿到的数据如下所示。这种时间格式来自于国际标准化组织的国际标准——ISO 8601，全称为《数据存储和交换形式·信息交换·日期和时间的表示方法》。原文规定了标准的日期-时间表示方法，即，当日期和实践合并表示时，需要在时间前面加一大写字母T，如要表示北京

Hemist

6961人浏览 · 2022-07-09 21:05:21

Hemist · 2022-07-09 21:05:21 发布

项目需要实现一个将后端时间数据显示在前端 Table 中的场景，但后端响应的数据并不是我们想要的规范格式，因此，需要前端来格式化这个时间变量。

从后端拿到的数据如下所示。

{
	// 省略不必要的字段；
	"created_at": "2022-07-08T08:58:08+0000",
    "updated_at": "2022-07-08T08:58:10+0000",
	// 省略不必要的字段
}

这种时间格式来自于国际标准化组织的国际标准——ISO 8601，全称为《数据存储和交换形式·信息交换·日期和时间的表示方法》。

原文规定了标准的日期-时间表示方法，即，当日期和实践合并表示时，需要在时间前面加一大写字母T，如要表示北京时间2004年5月3日下午5点30分8秒，可以写成 2004-05-03T17:30:08+08:00 或 20040503T173008+08。

格式化时间字符串的 js 方法如下所示：

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

当然，在表格中需要双向绑定一下。

<el-table>
	<el-table-column
        label="提交时间"
        min-width="15%"
        align="center"
        prop="createdTime"
        :formatter="formatDate">
    </el-table-column>
</el-table>