table表单就是指table形式的表单,其数据结构会是一个Array,即一个字段名会出现多次的情况,数据结构如下:

对应的页面形式如下:

这是table表单跟传统的表单(字段名唯一)的主要区别,因此用element-ui的表单校验时也有区别。

问题背景:

输入比例的时候自动计算金额,输入金额的时候自动计算比例,同时比例和金额都分别加了校验。

当输入比例不符合校验规则(比如大于100,校验规则是比例不能超过100)的时候,此时金额的校验也应不通过(金额过大)。

出现的问题:

当输入比例不符合校验规则(比如大于100,校验规则是比例不能超过100)的时候,只提示比例过大,金额没有出现理想中的错误提示。

此时对金额进行调整输入:从右往左删掉部分位数,以达到符合校验规则,却发现删除出现问题,一直按删除键,金额纹丝不动,并不会改变。

经过冥思苦想及多方尝试,最后发现是楼主计算的时候拿的table数据没有深拷贝一下,导致数据不会发生改变。

将计算需要用到的数据用深拷贝的方式获取,就没问题了。如下:

 

总结:

vue具有双向数据绑定功能,因此在对需要修改的双向绑定数据时,请记得修改前对数据进行深拷贝,否则会出现问题。

 

Logo

前往低代码交流专区

更多推荐