第8节弹窗样式深度定制、禁用选项、弹窗宽度自适应 / 固定宽度本节重点popper-class自定义下拉弹窗样式、禁用单个选项、弹窗宽度控制以及常见样式穿透坑。核心知识点popper-class给下拉弹窗根元素追加自定义类名用来单独写弹窗样式重点因为弹窗 DOM 挂载在 body不在当前组件 scope 内el-option 的 disabled 属性禁用某一个选项无法点击选择popper-width控制下拉弹窗宽度支持两种写法popper-widthauto弹窗宽度自动和输入框保持一致默认popper-width300固定弹窗宽度 300px样式注意弹窗在 body 下style scoped样式无法直接生效要么去掉 scoped要么用:deep()::v-deep完整可测试代码template div classcontainer h4弹窗样式定制 禁用选项 弹窗宽度控制/h4 el-select v-modelselectVal placeholder请选择 popper-classmy-select-popper popper-width340 stylewidth:260px el-option labelVue3 valuevue / el-option labelReact valuereact / el-option labelAngular valueangular disabled / el-option labelNode.js valuenode / el-option labelGo valuego disabled / el-option labelPython valuepython / /el-select p stylemargin-top:16px选中值{{ selectVal }}/p /div /template script setup import { ref } from vue const selectVal ref() /script style scoped .container { padding: 20px; } /style !-- 弹窗挂载在bodyscoped无法作用写单独样式块 -- style .my-select-popper { /* 弹窗背景 */ background-color: #fbfdff !important; } .my-select-popper .el-select-dropdown__item { font-size:14px; } /* hover 选项背景 */ .my-select-popper .el-select-dropdown__item:hover { background-color: #eef5ff; } /* 禁用选项文字颜色 */ .my-select-popper .el-select-dropdown__item.is-disabled { color: #c0c4cc; } /style测试要点打开下拉弹窗弹窗宽度是 340px比输入框宽弹窗背景色变为浅蓝白色hover 选项背景改变Angular和Go选项灰色点击无反应无法选中disabled修改popper-widthauto弹窗宽度会自动和输入框宽度对齐尝试修改样式调整字体大小、hover 颜色验证 popper-class 生效业务坑总结❌ 坑直接在style scoped写.my-select-popper样式不生效弹窗 DOM 挂在 body脱离当前组件 DOM 树scoped 的 />