使用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}`)
        }
    })
})