vue2 中,element 2.x 版本,el-form-item 嵌套的 el-form-item 是通过for循环渲染的 应该如何自定义校验?

如果在 Vue 2 中使用 Element UI 2.x 版本，你通过 v-for 循环渲染了多个嵌套的 el-form-item，并且想要自定义校验功能，你可以使用动态校验规则的方式来实现。下面是一个示例代码，展示了如何自定义校验动态渲染的嵌套 el-form-item：

代码

Copy

<el-form :model="form" :rules="rules" ref="myForm">
<el-form-item v-for="(item, index) in formItems" :label="item.label" :key="index">
<el-input v-model="item.value" @blur="validateItem(index)"></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form>



export default {
data() {
return {
formItems: [
{ label: 'Item 1', value: '' },
{ label: 'Item 2', value: '' },
// ...
],
form: {},
rules: {}
};
},
methods: {
validateItem(index) {
this.$refs.myForm.validateField(`formItems.${index}.value`, error => {
// 校验结果处理
});
},
submitForm() {
this.$refs.myForm.validate(valid => {
if (valid) {
// 表单校验通过，执行提交操作
// ...
} else {
// 表单校验失败，给出错误提示
// ...
}
});
}
},
mounted() {
this.rules = this.formItems.reduce((rules, item, index) => {
rules[`formItems.${index}.value`] = [
{ required: true, message: `请填写${item.label}`, trigger: 'blur' },
// 自定义校验规则...
];
return rules;
}, {});
}
};


在这个示例中，我们使用 v-for 循环渲染了多个嵌套的 el-form-item，并且为每个 el-form-item 绑定了一个动态的 v-model。我们通过 validateItem 方法来触发对特定 el-form-item 的校验，该方法接收 index 作为参数。

在 mounted 生命周期钩子中，我们使用 reduce 方法根据 formItems 数组动态生成了校验规则对象 rules。在这个示例中，我们只演示了使用 required 校验规则来检查每个项是否为空，你可以根据自己的需求添加其他自定义校验规则。

在 validateItem 方法中，我们使用 this.$refs.myForm.validateField 方法来对特定的 el-form-item 进行校验。我们通过动态的字段路径 formItems.${index}.value 来指定要校验的字段，同时传递了一个回调函数来处理校验结果。

最后，我们使用 this.$refs.myForm.validate 方法来触发整个表单的校验，并在回调函数中处理校验结果，执行相应的操作。

请注意，这个示例假设 formItems 数组中的每个对象都有 label 和 value 属性，你可以根据实际情况进行调整。

在校验规则生成时，我们使用了动态的字段路径 formItems.${index}.value 来匹配每个项的值，并将其绑定到相应的校验规则上。

在 validateItem 方法中，我们使用 this.$refs.myForm.validateField 来针对特定的字段进行校验。通过传递动态的字段路径和回调函数，我们可以对特定的 el-form-item 进行校验，并在校验结果回调函数中进行相应的处理。

最后，在提交表单时，我们使用 this.$refs.myForm.validate 来触发整个表单的校验，并在回调函数中处理校验结果。

动态渲染的嵌套 el-form-item 中实现自定义校验功能！