如何转换Unix时间？Element表格毫秒时间戳转时分秒格式

嘿，我来帮你搞定这个时间格式转换的问题～ 你现在遇到的情况是后端返回毫秒级Unix时间戳，但Element表格直接显示原始数字，想要转成时:分:秒的格式对吧？有两种常用的方法可以实现，我给你详细说说：

方法一：直接在表格列中使用formatter格式化（推荐） #

Element的el-table-column自带formatter属性，专门用来格式化单元格内容，不用修改原始数据，非常方便。你只需要给表格列添加这个属性，写一个格式化函数就行：

首先，在你的Vue组件里定义一个时间格式化函数：

formatTime(timestamp) {
  // 把毫秒时间戳转成Date对象
  const date = new Date(timestamp);
  // 提取时、分、秒，注意补零（比如9分要变成09）
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  // 拼接成想要的格式
  return `${hours}:${minutes}:${seconds}`;
}

然后修改你的表格列代码，加上formatter：

<el-table-column label="Time Created" prop="create_time" :formatter="formatTime"></el-table-column>

这样表格就会自动把每个create_time的毫秒时间戳转成时:分:秒的格式显示啦～

方法二：在获取数据时提前转换 #

如果你需要在其他地方也用到格式化后的时间，或者不想在表格里处理，可以在获取数据的回调里直接修改数据：

修改你的getUserIncomeRecordList方法：

getUserIncomeRecordList() {
  Core.Api.User.getUserIncomeRecord(this.userId).then(res => {
    console.log(res);
    // 遍历record_list，把每个item的create_time转成时分秒格式
    this.incomeRecordList = res.record_list.map(item => {
      const date = new Date(item.create_time);
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      // 返回新的对象，保留原属性，替换create_time
      return {
        ...item,
        create_time: `${hours}:${minutes}:${seconds}`
      };
    });
    console.log(this.incomeRecordList);
  });
}

这样处理后，incomeRecordList里的create_time已经是格式化后的字符串了，表格直接显示就可以，不需要再改表格列代码。

两种方法的小总结 #

• 方法一适合只在表格显示时需要格式化的场景，原始数据还是保持时间戳，方便后续可能的其他操作（比如排序、再次转换格式）。
• 方法二适合多个地方都需要用到格式化后时间的场景，一次转换到处用。

内容的提问来源于stack exchange，提问作者guymil