Element ui 丨修改el-select 中选项下拉框的高度

在 全局样式 内添加下面的属性:


注意:

1.只能全局修改,无法针对单个组件修改,因此不能加scoped,测试过也不需要加 !important

2.max-height 的值 按项目需求修改即可

/* 表单: 选择器el-select 下拉框高度  */

.el-select-dropdown__wrap {
  max-height: 400px;
}

效果展示

修改Element UIel-select下拉框背景色的方法有以下几种: ### 直接添加背景色样式 可以通过给下拉框添加背景色样式来实现,代码如下: ```css /* 下拉框内容背景色 */ .el-select-dropdown__item.selected, .el-select-dropdown__item:hover, .el-select-dropdown__item.hover { color: #fff; background: #409EFF; } ``` 这种方式可以直接修改下拉框选项在选中、鼠标悬停时的背景色 [^1]。 ### 全局样式修改 找到下拉框的类名,写一个全局的样式来修改下拉框选项的样式。也可以通过 `/deep/` 来修改 `.el-select-dropdown__item` 的样式内容,或者通过 `popper-class` 设置的类名添加样式 [^2]。 ### 使用 `popper-class` 修改 给 `el-select` 添加 `popper-class` 属性,根据这个类名进行背景色修改。示例代码如下: ```vue <template> <el-select popper-class="selectFrom" v-model="activityNum" placeholder="语言切换" @change="selectModel($event)"> <el-option v-for="(item, index) in numtype" :label="item.name" :value="item.word" :key="index"></el-option> </el-select> </template> <style lang="less"> .selectFrom { color: #fff; border: 1px solid #176168 !important; /* background: #176168 !important; */ .el-select-dropdown__list { text-align: right; background: #176168 !important; } .el-select-dropdown__item { color: #fff; background: #176168 !important; } .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { background: #1b7f5d !important; } } </style> ``` 通过这种方式,可以针对特定的 `el-select` 组件修改下拉框的背景色 [^3]。 ### 使用 `:teleported="false"` 配置 普通修改样式不能生效的原因是下拉框组件直接挂载到 `#app` 节点上,导致不能在某个组件内修改下拉框的样式。使用 `:teleported="false"` 配置会将组件挂载在自己的页面上,从而可以正常设置样式 [^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值