时间戳

首页 > 解决方案 > 如何使用 vue-form-generator 创建嵌套字段集？

javascript - 如何使用 vue-form-generator 创建嵌套字段集？

问题描述

如何使用 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 演示

标签： javascriptformsvue.jsjsonschema

解决方案

如果我对您的理解正确，那么您已经能够在构建架构时添加字段集。使用组，您可以获得您正在寻找的不同字段集。如果您正在寻找动态 if/then 您可以使用visible下面第一个模型中的。您可以选择显示字段的模型和条件。每个组都是fieldsethtml 中的一个新组。

这是一个较老的问题，所以我希望您已经弄清楚了。

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"}


   }

推荐阅读