背景
需要动态加载输入域,如下图,这个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=" 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