美文网首页
el-select下拉文字过多,导致下拉弹窗铺满整个页面

el-select下拉文字过多,导致下拉弹窗铺满整个页面

作者: 扶得一人醉如苏沐晨 | 来源:发表于2022-11-12 09:26 被阅读0次

    问题如下

    下拉文字过多,导致下拉弹窗铺满整个页面

    image.png

    解决办法

    利用组件toopTip解决展示问题

    html中

                                     <el-form-item
                                            label="海关分类"
                                            :rules="dataRule.hscode"
                                            prop="hscode"
                                        >
                                            <el-select
                                                v-model="
                                                    tradeitemList[index].hscode
                                                "
                                                filterable
                                                placeholder="请选择海关分类"
                                            >
                                                <el-option
                                                    v-for="item in tradeitemList[
                                                        index
                                                    ].hgflOption"
                                                    :key="item.value"
                                                    :label="item.text"
                                                    :value="item.value"
                                                >
                                                    <el-tooltip
                                                        effect="dark"
                                                        :disabled="
                                                            item.text &&
                                                            item.text.length < 20
                                                        "
                                                        placement="top"
                                                        :content="item.text"
                                                    >
                                                        <span>{{ item.text }}</span>
                                                    </el-tooltip>
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
    

    style中

    <style  lang='scss'>
        .el-select-dropdown,
        .el-popper {
            max-width: 700px !important;
        }
    </style>
    

    相关文章

      网友评论

          本文标题:el-select下拉文字过多,导致下拉弹窗铺满整个页面

          本文链接:https://www.haomeiwen.com/subject/tswxxdtx.html