• 动态加载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=" 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

    如果错过太阳时你流了泪,那你也要错过群星了。
    在所有的矛盾中,要优先解决主要矛盾,其他矛盾也就迎刃而解。
    不要做个笨蛋,为失去的郁郁寡欢,聪明的人,已经找到了解决问题的办法,或正在寻找。
  • 相关阅读:
    利用按钮打开tabBar页面
    git 推送出现 "fatal: The remote end hung up unexpectedly"
    常用的数据整理的JavaScript库
    github上打包的样式为什么在预览的时候,出现404
    window下node更新
    aws.s3的 upload 和putObject有什么区别
    vue项目打包之后页面空白解决办法
    key是数字的对象集合
    python pip 更换国内安装源(windows)
    python的sciter库Pysciter安装教程(win32 + win64)
  • 原文地址:https://www.cnblogs.com/szrs/p/15271451.html
Copyright © 2020-2023  润新知