Vue Element多层循环Form表单动态添加校验规则
时间: 2023-09-09 13:11:39 浏览: 70
你可以使用 Vue Element 的表单验证规则来实现多层循环的动态添加校验规则。下面是一个简单的示例代码,演示了如何使用 v-for 指令循环生成表单项,并动态添加校验规则:
```html
<template>
<el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
<el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label" :prop="item.prop">
<el-input v-model="formData[item.prop]" :placeholder="item.placeholder"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {}, // 表单数据
formItems: [ // 表单项配置
{ label: '姓名', prop: 'name', placeholder: '请输入姓名' },
{ label: '年龄', prop: 'age', placeholder: '请输入年龄' },
// ...
],
formRules: {} // 表单校验规则
};
},
mounted() {
this.generateFormRules();
},
methods: {
generateFormRules() {
this.formItems.forEach(item => {
// 根据不同的表单项生成对应的校验规则
// 这里只是示例,你可以根据实际需求进行修改
this.$set(this.formRules, item.prop, [
{ required: true, message: `请输入${item.label}`, trigger: 'blur' },
// 其他校验规则...
]);
});
}
}
};
</script>
```
在上面的示例中,表单项的配置存储在 `formItems` 数组中,你可以根据实际需求自行修改。在 `generateFormRules` 方法中,通过遍历 `formItems` 数组,动态生成表单校验规则,并将其存储在 `formRules` 对象中。最后,在 `<el-form>` 组件上使用 `:rules` 属性绑定表单校验规则。
这样,你就可以实现多层循环动态添加校验规则的功能了。记得根据实际需求修改校验规则的内容。