element-ui表单组件根据json动态渲染

需求

假设一个页面有上百个表单需要输入，且表单类型不限于button、select、input…如果前端将表单一个个写死，不仅工作量巨大，也不够灵活。所以，后端可以事先返回一个json文件，里面有关于该页面每一个表单项的类型、默认值、选项的定义，前端根据json来动态遍历渲染表单

demo

目录层级

|-- src
    |-- components
         |-- dynamicForm
         |    |-- formList.vue
         |    |-- formItem.vue
         |    |-- index.js
    |-- App.vue
    |-- main.js

示例代码

// formList.vue
<template>
  <div class="formWrap">
    <el-form
        class="dynamic-form"
        :label-width="formConfig.labelWidth"
        :size="formConfig.size"
    >
       <dynamic-form-item
          v-for="(item,key) in formConfig.formItemList"
          :key="key"
          :configItem="item"
       >
       </dynamic-form-item>
    </el-form>