el表单验证的坑

记录element组件el-form使用v-for和v-if时，验证数据时报错的处理。

v-for问题

使用v-for时导致表单验证出现this.$refs[formName].validate is not a function

// $refs[formName]后面加多一个[0] this.$refs[formName][0].validate((valid) => {}) 

v-if问题

• 问题：通过v-if控制两个表单显示或隐藏的过程中，会出现验证失效、验证冲突、样式出错等情况。
• 解决：给两个表单分别加key值。
• 原因：即使两个表单绑定的值不同，但是浏览器在解析时，先解析第一个表单，此时表单上是没有绑定ref，之后再解析第二个表单时，浏览器发现这它的prop和第一个表单的prop一样，所以就认为这两个表单是同一个表单，就没有重新渲染，而ref本身是作为渲染结果被创建的，所以第二个表单没能成功绑定ref，验证就无法生效。