【vue】时间格式化和小数转发成百分比

九九的金金子

已于 2022-03-10 09:44:56 修改

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： vue.js npm 前端

于 2022-03-06 10:35:19 首次发布

本文链接：https://blog.youkuaiyun.com/daxiangaifashi/article/details/123306518

VUE 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何将前端接收到的时间字符串从'yyyy-MM-ddTHH:mm:ss.SSSZ'格式转换为'yyyy-MM-dd'，并演示了小数转百分比的实现。涉及`el-date-picker`和`el-table`组件的日期格式化，以及数值格式化的`toFixed`方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 时间格式化

（1）前端传给后台的入参

时间选择器，参入的格式是：[“2022-02-27T16:00:00.000Z”, “2022-02-27T16:00:00.000Z”]
后台需要的格式是：[“2022-02-27”, “2022-02-27”]
代码实现：

 <el-form-item label="创建日期">
            <el-date-picker
              v-model="reports.query.create_date"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            </el-form-item>

（2）后台返回数据给前端展示

后台返回的格式是：[“2022-02-27T16:00:00.000Z”, “2022-02-27T16:00:00.000Z”]
前端想展示的格式是：
在这里插入图片描述
代码实现：

  <el-table-column
      align="center"
      prop="create_date"
      label="创建日期"
      sortable
      :formatter="dateFormat"
      width="180">
    </el-table-column>

 methods: {
 	dateFormat: function(row, column) {
      var t = new Date(row.create_date)
      return t.getFullYear() + '-' + t.getMonth() + 1 + '-' + t.getDate() + ' ' + t.getHours() + ':' + t.getMinutes() + ':' + t.getSeconds()
    }
 }

2.小数转化成百分比，保留三两位小数

代码实现：

    <el-table-column
      align="center"
      prop="passing_rate"
      label="通过率"
      sortable
      :formatter="ChangeToPercentage"
      width="100">
    </el-table-column>

 methods: {
 	ChangeToPercentage: function(row, column) {
      var percent = (row[column.property] * 100).toFixed(2) + '%'
      return percent
    }
 }