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%