动态循环el-form-item怎么校验

### 动态循环生成的 `el-form-item` 校验实现方式 在 Vue 和 Element-UI 中，动态生成的表单项需要通过绑定 `prop` 属性来指定校验规则。以下是实现动态循环生成的 `el-form-item` 校验功能的具体方法。 #### 1. 绑定 `prop` 属性 `prop` 属性是 `el-form-item` 的关键属性，用于定义表单字段的路径。如果未正确绑定 `prop`，校验规则将无法生效[^5]。对于动态生成的表单项，可以通过字符串拼接的方式动态设置 `prop` 的值。 #### 2. 定义动态校验规则 动态校验规则可以通过遍历数据结构，在初始化时为每个表单项生成对应的规则，并将其绑定到 `rules` 对象中。以下是一个完整的示例： ```vue <template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item v-for="(item, index) in dynamicFormList" :key="index" :label="item.rpname + ':'" :prop="'objList.' + item.rpid" > <el-input v-model="ruleForm.objList[item.rpid]" class="formWidthdpls" :placeholder="'请输入' + item.rpname" ></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { ruleForm: { objList: {}, // 动态表单字段 }, rules: {}, // 动态校验规则 dynamicFormList: [], // 动态表单列表 }; }, created() { this.initDynamicForm(); }, methods: { initDynamicForm() { // 模拟接口返回的数据 const res = { data: [ { rpid: "1", rpname: "姓名", rpisrequired: true }, { rpid: "2", rpname: "年龄", rpisrequired: false }, ], }; this.dynamicFormList = res.data; this.dynamicFormList.forEach((item) => { item.rpid = "name" + item.rpid; // 自定义字段名 let formRule = []; if (item.rpisrequired) { formRule.push({ required: true, message: "请输入" + item.rpname, trigger: "blur", }); } this.rules["objList." + item.rpid] = formRule; // 动态添加规则 this.$set(this.ruleForm.objList, item.rpid, ""); // 初始化表单字段 }); }, }, }; </script> ``` #### 3. 注意事项 - **`prop` 属性的路径**：当表单字段为对象或数组时，`prop` 的值需要使用点号（`.`）或括号（`[]`）表示路径[^4]。 - **动态规则的绑定**：确保在初始化时为每个动态生成的表单项绑定正确的校验规则[^2]。 - **`v-model` 的双向绑定**：动态生成的表单项需要通过 `v-model` 实现双向绑定，确保输入值能够实时更新[^3]。 #### 4. 校验触发 调用 `this.$refs.ruleForm.validate()` 方法可以触发整个表单的校验。如果需要对某个具体的表单项进行校验，可以使用 `this.$refs.ruleForm.validateField(prop)` 方法[^4]。 --- ###