el-form表单多重循环校验

`el-form` 是 Element UI 中的一个表单组件，它提供了一种组织和验证复杂表单的方式。`label` 校验通常指的是当用户填写表单时，与 `el-form-item` 结合使用的 `label` 属性可以用来指定验证规则。例如，你可以设置一个必填规则，如果用户没有输入内容，那么关联的提示信息会在验证失败时显示。 对于循环校验，假设你有一个数组或者列表需要在一个表格或列表结构中进行表单验证，比如每个元素都需要单独验证，这时你可以通过动态渲染 `el-form` 和 `el-form-item` 来实现。你可以遍历这个数组，为每个元素创建一个新的表单项，并给每个 `label` 或者对应的验证规则设置特定的值。Element UI 提供了 `v-for` 指令配合 Vue.js 的数据绑定来轻松地处理这种情况。 一个简单的例子可能是： ```html <template> <el-form v-model="formItems" :inline="true"> <el-row v-for="(item, index) in itemsToValidate" :key="index"> <el-col> <el-form-item label="标题{{index + 1}}">{{ item.title }}</el-form-item> <!-- 这里可以添加其他字段及其对应验证规则 --> <el-form-item prop="content[{{index}}]" rules="required">内容{{index + 1}}</el-form-item> </el-col> </el-row> </el-form> </template> <script> export default { data() { return { formItems: {}, // 初始化一个空的对象存储表单数据 itemsToValidate: [ { title: '' }, { content: '' } // 省略更多... ] }; } }; </script> ```