element-ui - elementui，多动态表单验证，如何确认失败是哪一个表单？

Question

页面结构如下图，左侧为导航栏，每一项对应的表单不同（数据对象不同），所以右侧对应的表单不同，右侧通过子组件实现，每个子组件里面有一个验证方法，左侧选中哪一项则高亮，右侧对应的表单显示，其他的隐藏起来。

validate() {
  return this.$refs.form.validate();
}

现在需要实现的效果是，哪个表单验证失败了，自动定位到哪一个表单？谢谢

Answer 1

1. 将每个form表单添加ref标识
2. 提交时循环ref所有表单进行检验form.validate()
3. 直到其中一个表单错误时，中断检验。
4. 根据错误检验时，对应ref表单，就能知道是哪个表单的错误

Answer 2

你外面肯定是批量调用的 validate，那你调用的时候 await 一下结果呗。如果不成功当前 idx 就是报错的表单