antd vue form 手动校验_动态生成的表单如何用 el-form 校验，你知道吗？

背景

Vue 的 el-form 提供了表单校验功能，常规用法是用 :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。但是有一种情况，如果表单位于 v-for 标签中，是动态生成的，该怎么使用 el-form-item 来校验呢？

此外，如果待校验的表单是 el-popover 组件中的 readonly 表单，blur 触发不稳定，该怎么处理呢？

本文继续分享这两个问题的解决办法。

v-for 遍历的表单校验

根据官网的介绍，是在 el-form-item 中使用 :rules 属性，同时 prop 属性直接定位到具体循环元素。这个用法的前提是在循环外面包裹一个 el-form 元素，v-for 位于 el-form-item 中。

删除提交新增域名重置

位于循环中的 el-form-item ，为 el-form-item 设置 :rules 属性，同时设置它的 prop 属性需要遵循的规则为：

   prop=循环对象.下标.子属性

运行效果：