动态加载form表单报错[Vue warn]: Error in beforeDestroy hook: "Error: [ElementForm]unpected width " found in

背景

需要动态加载输入域，如下图，这个input输入域的个数是动态的。

 

父页面代码：

<el-table-column label="操作" align="center" min-width="100">
                            <template slot-scope="scope">
                                <el-button type="text" @click="getXxlParams(scope.row.jobGroup)">
                                    生成参数
                                </el-button>
                                <xxl-job-modal v-show="showModal" :module-data="moduleData" :module-obj="moduleObj" @closeme="closeme" />
                            </template>
</el-table-column>

模态框代码：

<div class="modal-body">
                <!--<p>我是一个Modal的内容</p>-->
                <el-form ref="mantainTab" :inline="true" label-width="auto" :model="childModuleObj" class="demo-form-inline" label-position="right">
                    <div v-for="(value, key) in moduleData" :key="key">
                        <!--{{ key }} ,{{ value }}-->
                        <el-form-item :label="key" :prop="key">
                            <el-input v-model="childModuleObj[key]" style="width: 200px;" class="filter-item" :placeholder="value|placeholderFilter(value)" />
                        </el-form-item>
                    </div>
                </el-form>
</div>

报错信息：

 

问题：第一次点击生成参数时，不报错，以后每次点击生成参数都会报错。

 原因：当组件中存在v-show时，并且el-form中labelWidth设为auto时，就会获取不到label的宽度。可以将v-show的地方改为v-if，或是labelWidth设为固定。

参看链接：https://blog.csdn.net/weixin_44679078/article/details/105850144

v-if与v-show的区别

<xxl-job-modal v-show="showModal" :module-data="moduleData" :module-obj="moduleObj" @closeme="closeme" />

可以看出，原来是通过v-show来控制模态框的显示的。

v-if:每次都会生成一个新的节点；

v-show:只在第一次生成节点，后几次点击都是控制模态框的显示与隐藏。

参看链接：https://www.cnblogs.com/dengyao-blogs/p/11378228.html