在Element UI中，可以使用this.$refs.form.validateField方法动态地为表单项添加验证规则。以下是一个简单的例子，展示了如何在Vue组件中实现这一功能。
<template>
<el-form ref="form" :model="form" :rules="rules">
<el-form-item v-for="(item, index) in form.items" :key="index" :prop="'items.' + index + '.value'" :label="'Item ' + (index + 1)">
<el-input v-model="item.value">
<template slot="append">单位</template>
</el-input>
<el-button @click="removeItem(index)">删除</el-button>
</el-form-item>
<el-button @click="addItem">添加项目</el-button>
<el-button type="primary" @click="validateForm">验证表单</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
items: [{ value: '' }]
},
rules: {
'items.[0].value': [
{ required: true, message: '请输入值', trigger: 'blur' }
]
}
};
},
methods: {
addItem() {
this.form.items.push({ value: '' });
this.$nextTick(() => {
// 添加新项后，为最后一项动态添加验证规则
const lastIndex = this.form.items.length - 1;
this.$refs.form.validateField(`items.${lastIndex}.value`);
});
},
removeItem(index) {
this.form.items.splice(index, 1);
},
validateForm() {
this.$refs.form.validate((valid) => {
if (valid) {
alert('验证通过');
} else {
alert('验证失败');
return false;
}
});
}
}
};
</script>在这个例子中，我们有一个表单，用户可以动态添加和删除项目。每个项目都有一个对应的输入框，我们为第一个项目添加了必填的验证规则。当用户点击添加项目时，我们使用this.$refs.form.validateField来为新添加的项目动态添加验证规则。这样，每个项目都会根据用户的操作动态地添加相应的验证规则。