vue根据后台传递的json数据生成动态配置页面（二）动态弹窗/ 展示部分其他源码

首先声明一哈，这个项目目前排期无限延后了，这个项目分为建模和展示。目前建模部分完成了，但是和展示部分的数据结构大不一样。所以如果只是展示的话可以看一下，如果还要建模就不要看了。

动态弹窗

调用

 <dynamicAddForm 

:title=title 

:addFormData=addFormData 

:show=open 

@submit='submit' 

@cancel='cancel'>

</dynamicAddForm>

组件

<template>

<!-- <div :style="{'width':ifWidth}"> -->

    <el-dialog :title="title" :visible.sync="show" width="600px">

         <el-form :model="form" ref="form"  :rules="rules" label-width="180px"> 

              <el-form-item  v-for="item in addFormData" :label="item.tittle">

                    <component 

                    :is="item.componentType" 

                    v-model="item.defalutValue"                

                    :placeholder="item.placeholder" 

                    clearable

                    :options="item.optionValue"

                    :props="{value: 'code',label: 'name',children: 'children', checkStrictly: true, expandTrigger: 'hover' }"

                    value-format="yyyy-MM-dd"

                    > 

                        <div v-if="item.componentType=='el-select'">

                            <el-option

                            v-for="dict in item.optionValue"

                            :key="dict.dictValue"

                            :label="dict.dictLabel"

                            :value="dict.dictValue"

                            /> 

                        </div>

                         <div v-if="item.componentType=='el-radio-group'">

                            <el-radio

                            v-for="dict in item.optionValue"

                            :key="dict.dictValue"

                            :label="dict.dictValue"

                            >{ {dict.dictLabel}}

                            </el-radio> 

                        </div>    

                    </component>

              </el-form-item>

         </el-form>

        <div slot="footer" class="dialog-footer">

            <el-button type="primary" @click="submitForm">确 定</el-button>

            <el-button @click="cancel">取 消</el-button>

        </div>

  </el-dialog>

  <!-- </div> -->

</template>

<script>

export default {

    props:{

        ifWidth:{

            type:String,

            default:'100%'

         }, 

        addFormData: {

            type:Array,

            default:() => {