Using form-create to Dynamically Generate Forms in Vue

In many projects you may encounter a variety of form requirements, and dynamically creating forms with the form-create library allows you to efficiently generate, render, and validate forms based on JSON definitions.

form-create is a component that can generate forms with dynamic rendering, data collection, validation, and submission capabilities. It works with popular UI frameworks such as ElementUI, iView, and Ant‑Design‑Vue.

Step 1 – Define form items – Create a JSON array describing each field (id, key, name, description, type, size, required flag, default value, etc.). Example:

formItem: [
        {
          id: 1,
          cf_key: "customkey_1",
          cf_name: "属性1",
          cf_desc: "213221",
          cf_type: "date",
          cf_size: "small",
          is_required: 1,
          default_value: null,
          type_options: null,
          cus_id: 1,
          customkey_23: null,
          rules: [
            {
              required: true,
              message: "必填项不能为空",
              trigger: "change"
            }
          ]
        }
      ]

Step 2 – Render the form – Use v‑for to iterate over formItem and create el-form-item elements. Conditional rendering (e.g., v‑if="item.cf_type === 'date'" ) selects the appropriate component, and @change emits a custom event to update the model.

<div v‑for="item in formItem" :key="item.id" class="form‑item">
  <el‑form‑item :key="item.id" :rules="item.rules" :id="item.id" :prop="item.id">
    <template v‑slot:label>
      <label>{{ item.cf_name }}</label>
    </template>
    <el‑date‑picker v‑if="item.cf_type === 'date'"
                    v‑model="formData[item.id]"
                    type="date"
                    :size="item.size"
                    placeholder="请选择日期"
                    @change="(value) => onchangeSelect(item, value)"></el‑date‑picker>
  </el‑form‑item>
</div>

Step 3 – Bind data and validation – Pass formData and formItem as props to a child component, emit events to manually update v‑model , and initialize formData and formRules by iterating over formItem . Required fields are added to formRules with appropriate triggers (blur or change).

<el‑form :model="formData" :rules="formRules" ref="formRef" label‑position="top" size="small">
  <fromItem :formData="formData" :formItem="formItem" @onchangeSelect="onchangeSelect"></fromItem>
</el‑form>

formItem.forEach(item => {
  formData[item.cf_id] = item.cf_value || "";
});

formItem.forEach(item => {
  if (item.is_required) {
    formRules[item.matterCustomAttribute.id] = [{
      required: item.is_required === 1,
      message: "必填项不能为空",
      trigger: ["input", "textarea", "number"].includes(item.matterCustomAttribute.cf_type) ? "blur" : "change"
    }];
  } else {
    item.rules = [];
  }
});

The final result is a fully functional, dynamically generated form that can be customized for any scenario, demonstrating how evaluating plugin capabilities and implementing custom logic can improve flexibility and coding proficiency.