后端响应的时间戳对象格式如何在前端element-ui的e-table中设置时间格式如:某年-某月-某日 某时:某分:某秒!可以使用JavaScript的Date对象将其格式化为所需的日期时间字符串

要将后端响应中的`createdTime`时间字段以某年-某月-某日 某时:某分:某秒的格式显示在Element-UI的el-table中,可以使用Element-UI的自定义列模板功能。以下是一个简单的示例:

假设您有一个名为`data`的数组,其中包含后端响应的数据,其中包含了`createdTime`字段

"createdTime": { "nano": 0, "year": 2021, "monthValue": 12, "dayOfMonth": 16, "hour": 5, "minute": 54, "second": 45, "dayOfWeek": "THURSDAY", "dayOfYear": 350, "month": "DECEMBER", "chronology": { "id": "ISO", "calendarType": "iso8601" } }

,您可以像这样在el-table中显示它:

```vue

<template>
  <div>
    <el-table :data="data">
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{ formatDate(scope.row.createdTime) }}
        </template>
      </el-table-column>
      <!-- 其他列 -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [], // 后端响应的数据
    };
  },
  methods: {
    formatDate(timestamp) {
      // 使用JavaScript的Date对象将时间戳格式化为某年-某月-某日 某时:某分:某秒
      const date = new Date(timestamp.year, timestamp.monthValue - 1, timestamp.dayOfMonth, timestamp.hour, timestamp.minute, timestamp.second);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 补零
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
};
</script>


```

在这个示例中,我们首先定义了一个名为`formatDate`的方法,该方法接收一个时间戳对象,使用JavaScript的Date对象将其格式化为所需的日期时间字符串。然后,在el-table中的列模板中,我们使用`formatDate`方法来显示格式化后的时间。

确保将`data`数组填充为从后端响应获取的数据,并根据您的需求配置其他el-table列。这样,`createdTime`字段就会以指定的日期时间格式显示在el-table中。

  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值