跳转至

前端-组件渲染-el-select-teleported下拉被遮罩遮挡

问题现象

  • el-dialog 内嵌 el-select，点击下拉按钮后无任何反应，下拉面板不出现
  • 并非选项为空，而是整个浮层不可见
  • 控制台无报错，API 数据正常返回

核心问题

  • Element Plus 的 el-select 默认 teleported=true，下拉浮层渲染到 document.body
  • 浮层默认 z-index 低于 el-dialog 的遮罩层（通常 backdrop z-index 为对话框 z-index 减 1）
  • 当对话框设置了 append-to-body + 高 z-index（如 9999），下拉浮层被遮罩遮挡，交互不可见
  • 本项目涉及 Element Plus 2.6.x，所有对话框内的 el-select 都可能受此影响

涉及文件：web/admin/src/views/modules/insurance/location-manage.vue

解决方法

给对话框内所有 el-select 添加 :teleported="false"，让浮层留在对话框 DOM 内：

<!-- 修复前 -->
<el-select v-model="form.company_id" filterable placeholder="请选择公司" style="width:100%">

<!-- 修复后 -->
<el-select v-model="form.company_id" filterable placeholder="请选择公司" style="width:100%" :teleported="false">

下次防错措施

  1. 快速定位：打开 DevTools Elements 面板，搜索 .el-select-dropdown 或 .el-popper，看浮层是否在 body 下而非对话框内；F12 强制修改浮层 z-index 为 10000 可快速验证
  2. 开发规范：项目中所有 el-dialog（尤其设置了 append-to-body 或自定义 z-index 的）内的 el-select、el-date-picker、el-cascader 等弹出类组件，统一加 :teleported="false"
  3. ESLint 规则：可自定义规则检测 el-dialog 内的 el-select 是否缺少 teleported 属性
  4. 复查范围：全局搜索其他有 el-dialog 且含 el-select 的页面，逐一添加 
    rg 'el-dialog' web/admin/src --files-with-matches | xargs rg 'el-select' -l