vue中table表格中，点击一个按钮，可以新增一整行的数据，并且在谷歌浏览器中使用百分数用toFixed()保留位数的使用介绍

谷歌浏览器使用百分比中保留位数toFixed(2)，当输入的数字非常大的时候，保留后的小数，就会出现错误，下面就会介绍。

vue中的el-table表格中，点击按钮，就会新增一整行的数据

<template>
  <div>
      <el-table :data="formTable.prjMeasureItemPos" border class="jk-table">
          <el-table-column align="center" width="140px" label="检查项" prop="checkId">
            <template #default="{$index,row}">
              <el-select v-model="row.checkId" placeholder="请选择">
                <el-option
                  v-for="(item,index) in checkOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                  :disabled="OptionIsDisable(index)"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="测量点数" width="100px" align="center" prop="pointNum">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.pointNum"
                @change="formatpointNum(scope.$index,true)"
                placeholder="请输入内容"
                oninput="value=value.replace(/[^\d.]/g,'')"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="合格点数" width="100px" align="center" prop="pointQualityNum">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.pointQualityNum"
                @change="formatpointNum(scope.$index,false)"
                placeholder="请输入内容"
                oninput="value=value.replace(/[^\d.]/g,'')"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="itemDescribe" align="center" label="合格率">
            <template slot-scope="scope">
              <span>{{scope.row.pointQualityNum>0&&scope.row.pointNum>0?(parseFloat( (scope.row.pointQualityNum/scope.row.pointNum)*100).toFixed(2))+'%':null}}</span>
            </template>
          </el-table-column>
          <el-table-column width="80px" align="center">
            <template #header="{$index,row}">
              <span style="position:absolute;top:8px;left:10px">操作</span>
              <el-button
                style="float:right;"
                type="text"
                @click="addDetail(row)"
                v-if="formTable.prjMeasureItemPos.length<=checkOptions.length"
              >
                <img src="../components/assets/jia.png" />
              </el-button>
            </template>
            <template #default="{$index,row}">
              <el-button size="mini" type="text" @click="DeleteDetail($index,row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
  </div>
</template>
<script>
import { getDicListSelect } from "./src/services";
export default {
  data(){
    return{
      formTable:{
        prjMeasureItemPos: []
      },
      checkOptions:[],//检查项
    }
  },
  watch:{
    "formTable.prjMeasureItemPos":{
       immediate: true,
       handler(value){
         if (this.formTable.prjMeasureItemPos.length === 0) {
           this.formTable.prjMeasureItemPos.push({
             checkId:'',
             checkName:'',
             pointNum:null,
             pointQualityNum:null
           })
         }
       }
    }
  },
  methods:{
    //根据输入的数字，进行判断，如果合格点数大于测量点数就会提示
    formatpointNum(index,operation){
      if (parseInt(this.formTable.prjMeasureItemPos[index].pointNum)<parseInt(this.formTable.prjMeasureItemPos[index].pointQualityNum)) {
        this.$message({
          showClose:true,
          message: "测量点数要大于等于合格点数",
          type:'error'
        })
      }
    },
    //获取检查项
    getInspection(val){
      const params = {
        dicCode:'SCSL_CHECK',
        pid:val
      };
      getDicListSelect(params).then(({data})=>{
        const f = data.map(item =>{
          return {
            id : item.id,
            label: item.cnName
          }
        });
        this.checkOptions = f;
        for (let i in this.formTable.prjMeasureItemPos) {
          this.formTable.prjMeasureItemPos[i].checkId = "";
        }
      });
    },
    OptionIsDisable(index){
      for (let i in this.formTable.prjMeasureItemPos) {
        if (this.formTable.prjMeasureItemPos[i].checkId === this.checkOptions[index].id) {
          return true;
        }    
      }
      return false
    },
    //点击按钮增加一行数据
    addDetail(){
      this.formTable.prjMeasureItemPos.push({
        checkId:'',
        checkName:'',
        pointNum:null,
        pointQualityNum:null
      });
    },
    //删除新增的一行数据
    DeleteDetail(index){
      this.formTable.prjMeasureItemPos.splice(index,1)
    }
  }
}
</script>

效果图如下所示：