如果在 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: '項目 1', value: '' },
{ label: '項目 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 來觸發整個表單的校驗，並在回調函數中處理校驗結果。