效果
代码：
注意点：
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>
底部横向滚动条（样式按需修改）：
