vue-elementul实现表格中百分比相加等运算

效果图

思路

很简单，百分比属于字符串，没法进行加减乘除操作，那我们就想办法把他数字部分提取出来然后运算完了再拼接一个%不就搞定了吗。

上代码

//表格数据
      tableData: [
        {
          tire_specifications: "测试",
          forming_specifications: "测试",
          Forming_machine: "测试",
          num_of_inspections:78,
          grade_a_rate:80.77+'%',
          ab_rate:100+'%',
          upper:67,
          lower:88,
          lro_t1:0.94,
          lro_b1:0.96,
          rro_c:1.22
        },
         {
          tire_specifications: "测试",
          forming_specifications: "测试",
          Forming_machine: "测试",
          num_of_inspections:78,
          grade_a_rate:94.94+'%',
          ab_rate:100+'%',
          upper:67,
          lower:88,
          lro_t1:0.94,
          lro_b1:0.96,
          rro_c:1.22
        },]
           

//parseFloat把百分比转成数字,toFixed保留2个小数位，=+把字符串转成数字
    //注意点：parseFloat提取数字的特性是从开头起一直往后，如果碰到了字符串那就停止，所以如果你的开头是字符串中间是数字那提取不出来的，必须开头是数字才行，像94.94%提取出来就是94.94，如果是9A94.94%那提取出来的就是9.因为他遇到字符串就停止了。
    //toFixed是用来保留后面小数点的。写几就留几个，不过保留后也优缺点，就是会自动把数字转换成字符串，所以我们要用=+在把他转换回来。
    //=+转换的原理：纯数字组成的字符串参与运算后会转换成number类型的数据。
    //注意，这里是纯数字，如果你加了字母或者文字符号等在内，那就是NaN了。
    let a=+parseFloat(this.tableData[0].grade_a_rate).toFixed(2)
    let b=+parseFloat(this.tableData[1].grade_a_rate).toFixed(2)
    console.log((a+b).toFixed(2)+'%');    //175.71%