如何使用 vue-form-generator 创建嵌套字段集？
下面是一个示例，其中包含整个窗体周围的字段集。我想嵌套一个字段集以在主字段集中对技能和状态进行分组？我在文档中找不到任何解释这一点的内容。
var vm = new Vue({
el: "#app",
components: {
"vue-form-generator": VueFormGenerator.component
},
data() {
return {
model: {
id: 1,
name: "John Doe",
password: "J0hnD03!x4",
age: 35,
skills: ["Javascript", "VueJS"],
email: "john.doe@gmail.com",
status: true
},
schema: {
groups: [{
legend: "User Details",
fields: [{
type: "input",
inputType: "text",
label: "ID",
model: "id",
readonly: true,
featured: false,
disabled: true
}, {
type: "input",
inputType: "text",
label: "Name",
model: "name",
readonly: false,
featured: true,
required: true,
disabled: false,
placeholder: "User's name",
validator: VueFormGenerator.validators.string
}, {
type: "input",
inputType: "password",
label: "Password",
model: "password",
min: 6,
required: true,
hint: "Minimum 6 characters",
validator: VueFormGenerator.validators.string
}, {
type: "input",
inputType: "number",
label: "Age",
model: "age",
min: 18,
validator: VueFormGenerator.validators.number
}, {
type: "input",
inputType: "email",
label: "E-mail",
model: "email",
placeholder: "User's e-mail address",
validator: VueFormGenerator.validators.email
}, {
type: "checklist",
label: "Skills",
model: "skills",
multi: true,
required: true,
multiSelect: true,
values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"]
}, {
type: "switch",
label: "Status",
model: "status",
multi: true,
readonly: false,
featured: false,
disabled: false,
default: true,
textOn: "Active",
textOff: "Inactive"
}]
}]
},
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true
}
};
}
});html {
font-family: Tahoma;
font-size: 14px;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
}
pre {
overflow: auto;
}
pre .string {
color: #885800;
}
pre .number {
color: blue;
}
pre .boolean {
color: magenta;
}
pre .null {
color: red;
}
pre .key {
color: green;
}
h1 {
text-align: center;
font-size: 36px;
margin-top: 20px;
margin-bottom: 10px;
font-weight: 500;
}
fieldset {
border: 0;
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
border-color: #ddd;
}
.panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel-body {
padding: 15px;
}
.field-checklist .wrapper {
width: 100%;
}
fieldset {
border: 1px groove #ddd !important;
}<script src="https://unpkg.com/vue-form-generator@2.1.1/dist/vfg.js"></script>
<link href="https://unpkg.com/vue-form-generator@2.1.0/dist/vfg.css" rel="stylesheet" />
<script src="https://unpkg.com/vue@2.2.1/dist/vue.min.js"></script>
<h1 class="text-center">Demo of vue-form-generator</h1>
<div class="container" id="app">
<div class="panel panel-default">
<div class="panel-heading">Form</div>
<div class="panel-body">
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
</div>
</div>
</div>这是一个简单的 html 示例
<fieldset>
<legend>User Details</legend>
<label for="">ID</label>
<input type="text">
<br><label for="">Name</label>
<input type="text">
<br><label for="">password</label>
<input type="password">
<br><label for="">Age</label>
<input type="text">
<br><label for="">Email</label>
<input type="text">
<fieldset>
<legend>User Special Detils</legend>
<br><label for="">Skills</label>
<input type="text">
<br><label for="">Status</label>
<input type="text">
</fieldset>
</fieldset>编辑：
我在上面添加了简单的 html 演示
如果我理解正确，那么您已经能够在构建架构时添加字段集。使用组，您可以获得要查找的不同字段集。如果您正在寻找动态if/那么您可以使用下面第一个模型中的visible。您可以选择字段显示时间的模型和条件。 每个组都是 html 中的一个新fieldset。
这是一个较老的问题，所以我希望你已经弄清楚了。
schema: {
groups: [{
legend: 'Entry',
{model: "enter", type: "radios", label: "Enter", values: ["Yes","No"]),
{model: "entryPrice", type: "input", inputType: "number", label: "Entry Price",
visible(model) {
return model && model.entryType != 'Yes';
}
}
legend: 'newGroup',
{model: "model", type: "text" , label: "Cool Label", inputType: "text"}
}