Element Plus el-select 下拉框在滚动页面中定位错误的解决方案

问题描述

在使用 Element Plus 的 el-select 组件时，如果页面较长需要滚动，或者父容器设置了 overflow: hidden，下拉框可能会出现以下问题：

• 点击下拉框后，选项列表不显示或显示在错误位置
• 页面滚动后，下拉框位置计算错误
• 下拉框被父容器裁剪，只显示部分内容

问题原因

Element Plus 的 el-select 下拉框底层使用 Popper.js 进行定位，默认采用 absolute 定位策略。当满足以下条件时，定位计算会出错：

1. 页面布局容器设置了 overflow: hidden 或 overflow: auto
2. 页面发生滚动
3. el-select 位于页面较下方的位置

absolute 定位是相对于最近的定位祖先元素计算的，当页面滚动或存在 overflow 裁剪时，计算出的位置与实际视口位置不一致。

解决方案

给 el-select 添加 popper-options 属性，将定位策略改为 fixed：

<el-select 
  v-model="value" 
  :popper-options="{ strategy: 'fixed' }"
>
  <el-option label="选项1" value="1" />
  <el-option label="选项2" value="2" />
</el-select>

推荐做法

如果页面中有多个 el-select，可以定义一个公共变量：

<script setup lang="ts">
// 修复下拉框在滚动容器中定位问题
const popperOptions = { strategy: 'fixed' as const }
</script>

<template>
  <el-select v-model="value1" :popper-options="popperOptions">
    <!-- options -->
  </el-select>
  
  <el-select v-model="value2" :popper-options="popperOptions">
    <!-- options -->
  </el-select>
</template>

原理说明

• absolute 定位：相对于最近的定位祖先元素计算位置，受滚动和 overflow 影响
• fixed 定位：相对于浏览器视口计算位置，不受父容器滚动和 overflow 影响

使用 fixed 策略后，下拉框始终相对于视口定位，确保在任何滚动状态下都能正确显示。

适用场景

• 长表单页面
• 带有左侧导航的设置页面
• 使用 el-tabs 且内容较多的页面
• 任何父容器有 overflow: hidden 的场景

环境信息

• Element Plus: 2.8.0+
• Vue: 3.x

参考

• Popper.js Strategy
• Element Plus Select API