vue根据后台传递的json数据生成动态配置页面（一）动态组件

一、需求理解

前端主要分俩模块，一个是管理模块，一个是展示模块。

管理模块负责传递json数据。 如图1.1，目前只是大概做了一个静态数据传递,先做页面展示。

展示模块负责根据json数据展示页面。如图1.2，根据动态组件和传递json数据展示页面，页面主要有动态表单、动态按钮、动态列表、动态弹窗等。

                                                     图1.1 数据传递

                                                    图1.2  数据展示

二、设计思路

既然是vue动态生成页面，那么必然绕不开组件，所以就先从动态组件开始写。先写出动态表单，动态按钮，动态列表和动态弹窗的组件。然后再将他们之间的逻辑功能串联起来，这样，前端只需要传递数据，页面本身就可以完成全部的操作。

三、动态组件

主要还是谈一谈动态组件的编写吧。

动态表单

核心代码是 动态组件配置

   <component 

                    :is="item.componentType" 

                    v-model="item.defalutValue" 

                    size="small" 

                    :placeholder="item.placeholder" 

                    clearable

                    style="width: 200px"

                    :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>

这个组件基本包含了所有的项目中所需要用到的全部组件，输入框 ,选择框，级联选择器，时间选择器，radio-group等。

动态列表

核心代码如下

<el-table v-loading="tableData.loading" :data="tableData.tableList" @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="50" align="center" />

      <el-table-column  v-    for="item in tableData.tittle"  :width="item.width" :prop="item.prop" :label="item.name" :formatter="formatters" align="center" >

      </el-table-column> 

    </el-table>

其中一个比较难的地方是是formtter，因为如果el-table-column中没有prop属性的话，:formmatter就不生效，所以加上prop属性（之前是用的slot-scope）

转换代码如下，这个相当于提前把所有需要转换的东西都写进去，需要那个就从转换库中转换。

 formatters(row,column){

        for(var i=0;i<this.tableData.tittle.length;i++)

        {

            if(column.label==this.tableData.tittle[i].name)

            {     

                switch(this.tableData.tittle[i].prop)

                {

                  case 'sysLevel'://系统级别翻译

                  return this.selectDictLabel(this.tableData.sysLevelOptions, row.sysLevel); 

                  case 'timeType'://时间类型翻译

                  return this.selectDictLabel(this.tableData.timeTypeOptions, row.timeType);     

                  case 'mTime'://统计时间翻译

                       let timeFormat='{y}-{m}-{d}';

                       if (row.timeType=='y'){

                        timeFormat='{y}';

                        } else if (row.timeType=='m'){

                        timeFormat='{y}-{m}';

                         }

                  return this.parseTime(row.mTime,timeFormat);

 

                  default:

                  return row[this.tableData.tittle[i].prop]

                }

               

            }

        }

 

     },

这部分是基本的组件生成，写写博客摸摸鱼，下午要写一写组件之间的逻辑了。