vue3 修改el-select的展开高度

### 调整 Element Plus `el-select` 组件下拉列表的高度 为了调整 `el-select` 下拉菜单的高度，在 Vue 3 中可以利用 CSS 自定义样式来实现这一需求。通过覆盖默认的样式类名，能够有效地控制下拉框的最大高度以及滚动行为。 #### 方法一：全局样式设置 可以在项目的全局样式文件（如 `src/assets/styles/global.css` 或者 `index.css`）中加入特定的选择器： ```css /* 设置 el-select 的弹出框最大高度 */ .el-popper.is-select-dropdown { max-height: 200px; overflow-y: auto; } ``` 此方法适用于整个应用程序中的所有 `el-select` 实例[^1]。 #### 方法二：局部作用域内自定义样式 如果只想影响某个页面或组件内的 `el-select` 高度，则可以直接在该组件内部使用 `<style scoped>` 来限定样式的范围： ```html <template> <!-- 使用 el-select --> </template> <script setup lang="ts"> // ...省略其他逻辑... </script> <style scoped> /* 局部重写 select dropdown 样式 */ ::v-deep(.el-popper.is-select-dropdown) { max-height: 250px !important; /* 可根据实际需要调整数值 */ overflow-y: scroll; } /* 如果还需要进一步定制外观，比如边距、间距等也可以在这里继续添加 */ </style> ``` 注意这里使用了 `::v-deep()` 深层选择器以便穿透到子组件的应用程序结构中去应用这些样式规则[^2]。 #### 示例代码片段展示如何配置 `el-select` 下面是一个简单的例子展示了带有固定高度下拉选项卡的 `el-select` 组件实例化方式： ```vue <template> <div class="select-container"> <el-select v-model="selectedValue" placeholder="请选择..." popper-class="custom-select-dropdown"> <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"> </el-option> </el-select> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; const selectedValue = ref(''); const options = [ { value: 'option1', label: '黄金糕' }, { value: 'option2', label: '双皮奶' }, // 更多选项... ]; </script> <style scoped> .select-container ::v-deep(.custom-select-dropdown) { max-height: 300px; overflow-y: auto; } </style> ``` 上述代码不仅设置了固定的下拉列表高度，还提供了良好的用户体验——当选项过多时允许用户轻松浏览并选取所需项。