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
                    1. 时间格式化(1)前端传给后台的入参时间选择器,参入的格式是:[“2022-02-27T16:00:00.000Z”, “2022-02-27T16:00:00.000Z”]后台需要的格式是:[“2022-02-27”, “2022-02-27”]代码实现: &lt;el-form-item label="创建日期"&gt;            &lt;el-date-picker              v-model="reports.query.create_date"    
				
vue 保留小数点后两位以及百分比 1、将小数百分比(保留四位小数,四舍五入) export function ChangeDecimalToPercentage(data) { var data1 = (data*100).toFixed(4)+"%" return data1 2、保留小数点后两位四舍五入 export function NumFilter (value) { // 截取当前数据到小数点后两位 let realVal = parseFloat(value
谷歌浏览器使用百分比中保留位数toFixed(2),当输入的数字非常大的时候,保留后的小数,就会出现错误,下面就会介绍。 vue中的el-table表格中,点击按钮,就会新增一整行的数据 <template> <el-table :data="formTable.prjMeasureItemPos" border class="jk-table"> <el-table-column align="center" w
//在相应需要处理的el-table-column 中,添加formatter属性,并绑定了名为ChangeToPercentage的处理函数 <el-table-column label="税率" prop="taxRate" :formatter="ChangeToPercentage" min-width="60"> </el-table-column> 2、在methods里面写方法 //税率百分比
let number=this.buildData.testResult.auto_retest_number/this.buildData.testResult.auto_retest_number; let str=Number(number*100).toFixed(2); str+="%"; this.testCoverages=str;
用过excel格式设置的人,都了解excel格式定义功能的强大,几乎所有想要的格式,都可以设置。 因为前端也需要一个功能全的自定义格式扩展,vue-text-format这个扩展移植了excel的功能,可以在页面上方便的对数据改变显示格式。 使用方式也很简单,通过扩展vue的自定义命令v-format的形式,绑定格式,就可以将内部的文本进行换。 npm install vue-text-format import Vue from 'vue' import format fro