第 2 节基础扩展 - 下拉弹窗常用原生属性本节给 el-select 增加弹窗相关配置理解控制下拉面板行为的属性重点都是控制弹出层。核心el-select 的下拉面板底层是 el-popover很多属性是透传给 popover 的修改SelectDemo.vuetemplate div classdemo-box h3el-select 弹窗常用属性/h3 !-- popper-class给下拉弹窗单独加css类用来修改弹窗样式 popper-append-to-body是否把弹窗DOM挂载到body默认true防止父元素overflow裁剪弹窗 dropdown-height下拉面板最大高度超出滚动 placeholder提示文字 clearable清空按钮 -- el-select v-modelvalue placeholder请选择 popper-classmy-select-popper :popper-append-to-bodytrue dropdown-height200px clearable el-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value / /el-select /div /template script setup import { ref } from vue const value ref() // 多加几条数据用来测试滚动效果 const options ref([ { label: 选项1, value: 1 }, { label: 选项2, value: 2 }, { label: 选项3, value: 3 }, { label: 选项4, value: 4 }, { label: 选项5, value: 5 }, { label: 选项6, value: 6 }, { label: 选项7, value: 7 }, ]) /script style scoped .demo-box { padding: 30px; } /style !-- 注意popper挂载到bodyscoped样式无法生效所以写在外面 -- style .my-select-popper { background-color: #fafafa; } /style本节知识点popper-class给下拉弹窗添加自定义类⚠️不能写在 scoped 样式里因为弹窗 DOM 在 body 下不在当前组件 DOM 树popper-append-to-bodytrue弹窗 DOM 挂载到 body。解决父容器overflow:hidden截断下拉框的问题默认 truefalse弹窗挂载在当前组件 DOM 内父容器 overflow 会裁掉弹窗dropdown-height下拉面板最大高度选项超过高度会出现滚动条clearable选中后显示清空图标点击清空选中值测试任务点开下拉查看下拉面板背景是否变成#fafafa滚动下拉列表超过 200px 高度是否出现滚动条选中一项是否出现清空按钮点击清空能否重置 value可以尝试把popper-append-to-body改成 false给外层.demo-box添加overflow:hidden观察弹窗是否被裁剪