vue + element-ui table表单数据绑定问题--深拷贝

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

对应的页面形式如下：

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

问题背景：

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

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

出现的问题：

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

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

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

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

 

总结：

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