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

  • Post category:前端相關
  • Post last modified:2022-08-10
  • Reading time:2 mins read

問題點

工作上的專案使用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
    };

最後看看真實的結果:

This Post Has One Comment

Comments are closed.