修改el-select下拉框高度；更新：支持动态修改

文章目录

效果
动态修改：效果
代码
- 固定高度版本
- 动态修改高度版本（2024-12-25 更新：支持动态修改下拉框高度）

效果

在这里插入图片描述

动态修改：效果

在这里插入图片描述

代码

固定高度版本

注意点：
popper-class 尽量独一无二，防止影响其他页面样式

popper-append-to-body 的使用及全局样式 & 样式穿透问题

<template><div><!-- :popper-append-to-body="false"  --><el-select v-model="value" popper-class="custom-select-popper"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></div>
</template><script>export default {data() {return {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: ''}}
}
</script>// 二选其一：// 如果el-select添加了 popper-append-to-body="false"
// 并且style标签添加了 scoped，需要使用 ::v-deep 选择器
<style lang="scss" scoped>
::v-deep .custom-select-popper {height: 150px; // max-height 不生效.el-scrollbar {height: 100%;.el-select-dropdown__wrap {overflow-x: hidden; // 此处是隐藏底部自定义横向滚动条}}
}
</style>// 未添加 popper-append-to-body="false" 时，popper是插入在body子级
// 需要去掉 scoped，但是无比务必使用独一无二的class，防止影响其他样式
<style lang="scss">
.custom-select-popper {height: 150px;.el-scrollbar {height: 100%;.el-select-dropdown__wrap {overflow-x: hidden;}}
}
</style>

底部横向滚动条（样式按需修改）：
在这里插入图片描述

动态修改高度版本（2024-12-25 更新：支持动态修改下拉框高度）

<template><div><!-- :popper-append-to-body="false"  --><!-- 当popper插入在select元素下时，--popper-height 需要在 el-select 标签 --><el-selectv-model="value"popper-class="custom-select-popper":style="{'--popper-height': height}"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-button type="primary" @click="addOption">add option</el-button></div>
</template><script>export default {data() {return {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}],value: ''}},// 动态修改下拉框高度computed: {height() {// 这里：34 是el-option的高度，+17 是popper标签有marginconst maxHeight = this.options.length * 34 + 17return `${maxHeight > 150 ? 150 : maxHeight}px`}},// popper 插入在 body 时使用// 动态修改 body css变量watch: {height: {immediate: true, // 初始化时进行一次高度计算async handler(n) {await this.$nextTick()document.body.style.setProperty('--popper-height', n)}}},methods: {addOption() {const length = this.options.lengththis.options.push({value: '选项' + length + 1,label: '选项' + length + 1})}}
}
</script>// 二选其一：// 如果el-select添加了 popper-append-to-body="false"
// 并且style标签添加了 scoped，需要使用 ::v-deep 选择器
<style lang="scss" scoped>
::v-deep .custom-select-popper {// height: 150px; // max-height 不生效height: var(--popper-height);.el-scrollbar {height: 100%;.el-select-dropdown__wrap {overflow-x: hidden; // 此处是隐藏底部自定义横向滚动条}}
}
</style>// 未添加 popper-append-to-body="false" 时，popper是插入在body子级
// 需要去掉 scoped，但是无比务必使用独一无二的class，防止影响其他样式
<style lang="scss">
.custom-select-popper {// height: 150px; // 固定高度： 适用于option选项固定选项height: var(--popper-height); // 动态高度：适用于option不固定时.el-scrollbar {height: 100%;.el-select-dropdown__wrap {overflow-x: hidden;}}
}
</style>