<template>
<el-form :model="dynamicForm" :rules="rules" ref="dynamicForm" label-width="100px">
<el-form-item
v-for="(item, index) in dynamicForm.items"
:label="'Item ' + item.index"
:key="item.id"
:prop="'items.' + index + '.value'"
:rules="{ required: true, message: 'This field is required', trigger: 'blur' }"
>
<el-input v-model="item.value"></el-input>
<el-button @click.prevent="removeItem(item)">Delete</el-button>
</el-form-item>
<el-button @click="addItem">New Item</el-button>
<el-button type="primary" @click="submitForm">Submit</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
dynamicForm: {
items: []
},
rules: {}
};
},
methods: {
addItem() {
this.dynamicForm.items.push({
id: Date.now(),
index: this.dynamicForm.items.length + 1,
value: ''
});
},
removeItem(item) {
const index = this.dynamicForm.items.indexOf(item);
if (index !== -1) {
this.dynamicForm.items.splice(index, 1);
}
},
submitForm() {
this.$refs.dynamicForm.validate((valid) => {
if (valid) {
alert('Form is valid!');
} else {
console.log('Form is invalid');
return false;
}
});
}
}
};
</script>这个代码示例展示了如何在Vue.js中使用Element UI的el-form组件动态添加和删除表单项，并对这些项进行必填验证。通过为每个表单项指定一个唯一的prop属性，并在data中定义对应的rules对象，我们可以动态地为表单项添加验证规则。这样，每当我们添加新的表单项时，都会自动附加必填的验证规则。