在Vue 2中结合Element UI的表单验证规则，你可以创建一个递归组件来支持多层级的JSON结构。以下是一个简化的例子：
<template>
<el-form :model="form" :rules="rules" ref="form">
<recursive-form-item
:form="form"
:schema="schema"
:rules="rules"
:parent-prop="parentProp"
></recursive-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form>
</template>
<script>
import RecursiveFormItem from './RecursiveFormItem.vue';
export default {
components: {
RecursiveFormItem
},
data() {
return {
form: {},
schema: {
// 这里是你的多层级JSON结构
},
rules: {
// 这里是你的验证规则
},
parentProp: ''
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
alert('验证通过!');
} else {
console.log('验证失败!');
return false;
}
});
}
}
};
</script>
RecursiveFormItem.vue组件需要递归地渲染每个表单项，并根据传入的schema和rules生成相应的验证规则。
<template>
<div v-if="schema">
<el-form-item
v-for="(value, key) in schema"
:key="key"
:prop="parentProp + key"
:label="key"
>
<recursive-form-item
v-if="typeof value === 'object'"
:form="form"
:schema="value"
:rules="rules"
:parent-prop="parentProp + key + '.'"
></recursive-form-item>
<el-input
v-else
v-model="form[parentProp + key]"
:placeholder="key"
:rules="rules[parentProp + key]"
></el-input>
</el-form-item>
</div>
</template>
<script>
export default {
name: 'RecursiveFormItem',
props: ['form', 'schema', 'rules', 'parentProp'],
methods: {
getRules(key) {
return this.rules[key];
}
}
};
</script>
在这个递归组件中，你需要确保parentProp正确地传递并拼接，以便每个嵌套层级的表单项都有正确的prop属性。
这个例子提供了一个简单的框架，你需要根据实际的JSON结构和验证规则来扩展和调整。