如果在 Vue 2 中使用 Element UI 2.x 版本，你通过 v-for 循环渲染了多个嵌套的 el-form-item，并且想要自定义校验功能，你可以使用动态校验规则的方式来实现。下面是一个示例代码，展示了如何自定义校验动态渲染的嵌套 el-form-item：
代码#
<template>
<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>
</template>
<script>
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;
}, {});
}
};
</script>
在这个示例中，我们使用 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 来触发整个表单的校验，并在回调函数中处理校验结果。