table表單就是指table形式的表單,其數據結構會是一個Array,即一個字段名會出現多次的情況,數據結構如下:
對應的頁面形式如下:
這是table表單跟傳統的表單(字段名唯一)的主要區別,因此用element-ui的表單校驗時也有區別。
問題背景:
輸入比例的時候自動計算金額,輸入金額的時候自動計算比例,同時比例和金額都分別加了校驗。
當輸入比例不符合校驗規則(比如大於100,校驗規則是比例不能超過100)的時候,此時金額的校驗也應不通過(金額過大)。
出現的問題:
當輸入比例不符合校驗規則(比如大於100,校驗規則是比例不能超過100)的時候,只提示比例過大,金額沒有出現理想中的錯誤提示。
此時對金額進行調整輸入:從右往左刪掉部分位數,以達到符合校驗規則,卻發現刪除出現問題,一直按刪除鍵,金額紋絲不動,並不會改變。
經過冥思苦想及多方嘗試,最後發現是樓主計算的時候拿的table數據沒有深拷貝一下,導致數據不會發生改變。
將計算需要用到的數據用深拷貝的方式獲取,就沒問題了。如下:
總結:
vue具有雙向數據綁定功能,因此在對需要修改的雙向綁定數據時,請記得修改前對數據進行深拷貝,否則會出現問題。