使用Vue生成动态表单

{
 "code": 0,
 "msg": "success",
 "data": {
 "list": [{
  "id": 10,
  "name": "check_type",
  "type": "select_item",
  "title": "审核类型",
  "prompt_msg": "请填写审核类型",
  "selectObj": [{
  "id": 1,
  "item": "预审核"
  }, {
  "id": 2,
  "item": "患者审核"
  }],
  "val": null,
  "rank": 0
 }, {
  "id": 16,
  "name": "bank_branch_info",
  "type": "string",
  "title": "支行信息",
  "prompt_msg": "请填写支行信息",
  "selectObj": null,
  "val": null,
  "rank": 0
 }, {
  "id": 19,
  "name": "project_content",
  "type": "multiple",
  "title": "项目内容",
  "prompt_msg": "请填写项目内容",
  "selectObj": null,
  "val": null,
  "rank": 0
 }, {
  "id": 22,
  "name": "project_extension_time",
  "type": "integer",
  "title": "项目延长时间",
  "prompt_msg": "请填写项目延长时间",
  "selectObj": null,
  "val": null,
  "rank": 0
 }, {
  "id": 24,
  "name": "images",
  "type": "images",
  "title": "图片",
  "prompt_msg": "请上传图片",
  "selectObj": null,
  "val": null,
  "rank": 0
 }]
 }
}

<template>
  <div class="default images">
    <div class="lable">{{ item.title }}</div>
    <div v-if="item.val === null" class="content">
      <Uploader 
        :max-num="8"
        :user-imgs="project_image"
        @change="onUploadProject"
      />
    </div>
    <div v-else class="img-wrap">
      <img v-for="(it, idx) in item.val" :src="it" :key="idx" @click="preview(idx, item.val)">
    </div>
  </div>
</template>

<template>
  <div v-if="item" class="default multiple">
    <div class="lable">{{ item.title }}</div>
    <template>
      <textarea
        rows="3" 
        :placeholder="item.prompt_msg" 
        v-model="value" 
        :value="it.item">
    </template>
  </div>
</template>

<template>
  <div v-if="item" class="default select_item">
    <div class="lable select-lable">{{ item.title }}</div>
    <div class="content">
      <el-select
        v-model="value" 
        placeholder="请选择类型" 
        class="el-select-wrap" 
        size="mini"
        @change="onChangeFirstValue"
      >
        <el-option
          v-for="it in item.selectObj"
          :key="it.id"
          :label="it.item"
          :value="it.item">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

// 单行文本输入框组件
export { default as String } from './string.vue' 
// 单行数字输入框组件
export { default as Integer } from './integer.vue' 
// 多行文本输入框组件
export { default as Multiple } from './multiple.vue' 
// 下拉列表选择器组件
export { default as Select_item } from './select_item.vue' 
// 上传图片组件
export { default as Images } from './images.vue'

<template>
  <div class="g-container">
    <component 
      v-for="(item, number) in freedomConfig" 
      :key="item.name"
      :is="item.type" 
      :item="item" 
      :number="number" 
      @changeComponent="changeComponentHandle"
    ></component>
  </div>
</template>

<script>
  import * as itemElements from '../../components/itemElement'
  
  export default {
    components: itemElements,
  }
</script>

data() {
  return {
    value: ''
  }
},
watch: {
  value(v, o) {
    this.throttleHandle(() => {
      this.$emit('changeComponent', {
        number: this.number,
        value: this.$data.value
      })
    })
  }
},

this.checkFrom(freedomConfig, preWordorderData).then(canSubmit => {
  canSubmit && postSubmitWorkorder(preWordorderData).then(res => {
    if (res.code === 0) {
      showLoading()
      this.$router.push(`/detail/${res.data.id}`)
    }
  })
})