vue el-select下拉框在弹框里面错位,

1:原因是因为  底层滚动条滚动的问题。
2:解决方案

    加上这个属性   :popper-append-to-body="false"  和样式

<el-select
    :popper-append-to-body="false">
</el-select>

<style>
.el-select .el-select-dropdown {
    transform:translateX(-5px) !important; 
    position: absolute !important;
    left: 0;
    /* top: 35px; */
}
</style>

 

全局修改的话,把class样式 单独放一个css文件里面,然后在main.js里面引入

### 调整 Element UI `el-select` 下拉列表宽度 为了调整 `el-select` 组件下拉列表的宽度,可以采用多种方法来覆盖默认样式。由于Element UI架中的组件样式具有较高的优先级,直接通过全局CSS可能无法生效。 #### 方法一:使用自定义类名并增加 CSS 特指度 可以在模板中给 `el-select` 添加一个特定的 class 名称: ```html <template> <div> <el-select v-model="value" class="custom-width"> <!-- options --> </el-select> </div> </template> <style scoped> /* 提高特异性 */ .el-select.custom-width .el-select-dropdown__item { padding-left: 20px; } /* 设置出层宽度 */ .el-popper.is-customized-popper { min-width: 300px !important; /* 自定义宽度 */ } </style> ``` 这种方法利用了更高的选择器权重来确保样式能够被应用到目标元素上[^1]。 #### 方法二:使用深嵌套作用域插槽 (Scoped Slot) 如果希望更精确地控制内部结构,则可以通过 slot-scope 来访问子组件的内容,并对其进行定制化处理: ```html <template> <el-select ref="selectRef" v-model="value"> <el-option v-for="(item, index) in items" :key="index" :label="item.label" :value="item.value" slot-scope="{ item }" /> </el-select> </template> <script setup lang="ts"> import { nextTick, onMounted, ref } from 'vue' const selectRef = ref(null); onMounted(() => { nextTick(() => { const popperElm = document.querySelector('.el-select-dropdown'); if(popperElm){ popperElm.style.minWidth = "300px"; // 动态设置最小宽度 } }); }); </script> ``` 此方式允许动态操作 DOM 结构,在某些情况下更加灵活。 #### 方法三:借助 JavaScriptVue 生命周期钩子函数 对于一些复杂的场景,还可以考虑在 mounted 阶段获取实际渲染后的节点并通过原生 JS 进行修改;或者监听窗口大小变化事件实时更新下拉菜单尺寸等高级技巧。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值