Element plus的Select选择器点击不出现下拉列表

有些时候 el-select 是正常工作的,下拉列表已经创建成功,但它被父级样式上下文吞掉了,属于CSS渲染的问题。这种场景下,我们可以使用 el-select 的 strategy: fixed 属性,让el-select使用fixed坐标体系。

html 复制代码
<template>
<!-- 让 Select 选择器使用 fixed 坐标体系 -->
<el-select v-model="value" placeholder="请选择" style="width: 240px" 
    :popper-options="{
      strategy: 'fixed'
    }"
>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
</el-select>
</template>
<script setup>
const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>
相关推荐
wuhen_n15 小时前
模板编译三阶段:parse-transform-generate
前端·javascript·vue.js
滕青山15 小时前
正则表达式测试 在线工具核心JS实现
前端·javascript·vue.js
不可能的是15 小时前
前端图片懒加载方案全解析
前端·javascript
wuhen_n15 小时前
Fragment 与 Portal 的特殊处理
前端·javascript·vue.js
用户57573033462415 小时前
🚀 JS事件机制大揭秘:从“橘子”报警到“列表”瘦身,前端老鸟都在偷笑的秘密!
javascript
用户57573033462415 小时前
💎 JS 中的“隐形人”:Symbol 数据类型深度解密!从命名冲突到隐私保护
javascript
掘金安东尼16 小时前
Fun with TypeScript Generics:玩转 TS 泛型
前端·javascript·面试
掘金安东尼16 小时前
Next.js 企业级落地
前端·javascript·面试
掘金安东尼16 小时前
React 性能优化完全指南 2026
前端·javascript·面试
小霖家的混江龙16 小时前
从 0 到 1 实现一个 useState
前端·javascript·react.js