Vue2x component 动态渲染不同tab下的html组件

一、需求

最近新项目中有个需求，在新建任务时需要根据选定的场景来动态渲染不同tab页下的html组件，如下图：

二、思路及功能实现

动态渲染组件就想到了Vue的component内置组件来实现。组件中不同的html组件渲染通过is判断，封装不同的组件，比如input输入框、下拉选择select组件等，并引入。

主要代码如下：

<el-tab-pane
                        label="任务配置"
                        name="SCENE"
                    >
                        <div class="componentContainer">
                            <div
                                class="componentLiItem"
                                v-for="item in sceneParamList"
                                :key="item.paramName"
                            >
                                <div class="label-title">{{ item.paramName + ':' }}</div>
                                <component
                                    :is="getComponentType(item.displayValue)"
                                    v-bind:value.sync="item.paramValue"
                                    :paramName="item.paramName"
                                    :paramType="item.paramType"
                                    :displayValue="item.displayValue"
                                    :dataDomain="item.dataDomain"
                                    :childTreeId="taskChildTreeId"
                                    v-if="taskChildTreeId != null"
                                    :isShow="item.isShow === 'Y' ? true : false"
                                    @doInput="getInputVal"
                                    @doTextarea="getTextareaVal"
                                    @doInputNumber="getInputNumberVal"
                                    @selectChange="getTaskChangeVal"
                                    @dateChange="getDateChangeVal"
                                    @radioInput="getRadioInputVal"
                                    @checkChange="getCheckedVal"
                                    @fileChange="getFileVal"
                                >
                                </component>
                            </div>
                        </div>
                    </el-tab-pane>

// 获取tab标签页下的子组件-输入框的值
        getInputVal(val, name, displayValue, paramType) {
            if (paramType === "SCENE") {
                for (let i = 0; i < this.sceneParamList.length; i++) {
                    let param = this.sceneParamList[i];
                    if (param.displayValue === displayValue) {
                        if (param.paramName === name) {
                            param.paramValue = val;
                        }
                    }
                }
            }
            if (paramType === "SOURCE") {
                for (let i = 0; i < this.sourceParamList.length; i++) {
                    let param = this.sourceParamList[i];
                    if (param.displayValue === displayValue) {
                        if (param.paramName === name) {
                            param.paramValue = val;
                        }
                    }
                }
            }
            if (paramType === "TARGET") {
                for (let i = 0; i < this.targetParamList.length; i++) {
                    let param = this.targetParamList[i];
                    if (param.displayValue === displayValue) {
                        if (param.paramName === name) {
                            param.paramValue = val;
                        }
                    }
                }
            }
        },

三、遇到的问题

在动态渲染不同标签页下html组件中，未知参数名的下拉框组件赋值是空的

四、原因

 排查之后才发现是自己考虑不周，参数名、参数类型、显示方式等都是动态传入的。搜嘎，这不就找到问题所在了么。

那就应该根据不同tab的参数类型来判断不同参数名的下拉框组件、应该在哪个列表中进行赋值显示。

五、解决方法

根据不同tab下的参数类型、循环不同的参数列表，进而判断显示方式，参数名是否与传入的一致，然后再进行赋值。完美解决~~~~