美文网首页
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