Categories: 前端相關

Vue | table欄位 input輸入數字呈現千位數字串寫法不影響data裡資料為數字

問題點

工作上的專案使用Vue作為前端的框架，在撰寫有輸入數值、計算數值需求的頁面，碰上需要將input輸入框的數字轉成三位一撇(千位數)的字串形式呈現，邊輸入邊轉換，但是vue data裡儲存的資料型態會是去除三位一撇的數字。

解決方式

本來很煩惱怎麼解決，網路文章也有許多不同的寫法，但大多都看得霧煞煞，最後決定用自己的方式寫，依照這個需求可以分成兩個要解決的點:

template呈現時是三位一撇的字串
存進vue data時必須是數字型態

由於讀取與存取的形式不同所以不能用v-model直接綁定，需要讀寫分開處理。

template呈現時是三位一撇的字串

將input要傳入的value傳入轉換成三位一撇(千位數)的function，這邊是用正規表達式做改寫。

//template
<input type="text"  :value="thousand(data.value)" >

//methods
  thousand (data) {
      if (data !== undefined) {
        data = data.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
      }
      return data;
    };

存進vue data時必須是數字型態

綁定 input 動作，輸入時同時取得值，去掉千位數轉為number存進data。

//template
<input type="text"  :value="thousand(data.value)" 
          @input='inputToThousand("金額",data.index,$event)'  >

//methods
inputToThousand (name, index, event, arr = this.items) {
      //輸入時轉成無千位數存到data
      event.target.value = event.target.value.replace(/[^\d]/g, "").replace(/^[0]+/, "");
      if (event.target.value === "") event.target.value = 0;
      const parts = event.target.value.toString().split(".");
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      event.target.value = parts.join(".");
      let obj = arr[index];
      obj[name] = event.target.value.replace(/,/g, ""); //要存回去items
    };

最後看看真實的結果:

Yuki Hiew