超简单一行代码格式化时间戳

最新推荐文章于 2024-07-13 14:54:52 发布

一架打字机

最新推荐文章于 2024-07-13 14:54:52 发布

阅读量142

点赞数 1

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/iseyre/article/details/123076134

版权

本文介绍了两种在前端展示时间的方法。方法1通过逻辑代码将服务器返回的时间戳转换为友好的日期格式，并直接赋值给表格列。方法2则在模板中使用`toLocaleString()`方法直接格式化时间显示。这两种方式都确保了时间在前端的清晰易读。

摘要由CSDN通过智能技术生成

方法1：

逻辑代码：

    getuser(this.page).then(res => {
      console.log(res);
      this.userData = res.data.data.list;
      this.total = res.data.data.total;
      this.userData.forEach(item => {
          var date = new Date(item.createTime);
          console.log(date);
          let Y = date.getFullYear() + "-";
          let M =(date.getMonth() + 1 < 10? "0" + (date.getMonth() + 1): date.getMonth() + 1) + "-";
          let D = date.getDate() + " ";
          let h = date.getHours() + ":";
          let m = date.getMinutes() + ":";
          let s = date.getSeconds(); //把更改后的日历赋值给item.createTime
          item.createTime = Y + M + D + h + m + s;
          console.log(item.createTime)
      });
    });

html：

   <el-table-column
      prop="createTime"
      label="时间">
     
    </el-table-column>

方法2：

html：

       <el-table-column
      prop="createTime"
      label="时间">
       <template slot-scope="scope">
        <p>
            {{new Date(scope.row.createTime).toLocaleString()}}
        </p>
    </template>
    </el-table-column>

逻辑代码：无