第3节el-select 弹窗定位、滚动穿透与挂载容器popper-append-to-body /teleported适用 Vue3 Element PlusElement Plus 中旧popper-append-to-body已替换为teleported知识点说明teleported控制下拉弹窗 DOM 挂载位置teleportedtrue默认弹窗 DOM 会被挂载到body标签下脱离当前组件 DOM 层级。✅ 优点不会被父容器overflow:hidden、z-index遮挡大部分场景推荐。❌ 缺点弹窗不在组件内部样式穿透、事件冒泡会有差异。teleportedfalse弹窗 DOM 留在组件自身 DOM 内。✅ 优点DOM 结构在一起scoped 样式更容易控制。❌ 缺点父容器如果设置overflow: hidden下拉会被截断popper-offset弹窗和选择框之间的偏移距离单位 pxplacement弹窗弹出方位可选bottom-start(默认) /bottom/top-start/top完整测试代码template div classcontainer pteleportedtrue默认挂载body/p el-select v-modelvalue1 placeholder请选择 popper-offset8 placementbottom-start el-option label选项1 value1 / el-option label选项2 value2 / el-option label选项3 value3 / /el-select div stylemargin-top: 30px; overflow: hidden; height: 60px; pteleportedfalse父容器overflow:hidden会截断弹窗/p el-select v-modelvalue2 placeholder请选择 :teleportedfalse popper-offset8 placementbottom-start el-option labelA valueA / el-option labelB valueB / el-option labelC valueC / /el-select /div /div /template script setup import { ref } from vue const value1 ref() const value2 ref() /script style scoped .container { padding: 20px; } /style测试要点打开第一个下拉弹窗正常弹出不会被容器限制。打开第二个下拉会发现下拉弹窗被父容器截断这就是teleportedfalse的典型坑。修改placementtop弹窗会向上弹出修改popper-offset15弹窗离输入框距离变大。常见业务坑弹窗被父盒子遮挡优先检查 teleported 和父元素 overflow 属性。