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>
相关推荐
ZC跨境爬虫8 分钟前
跟着 MDN 学CSS day_13 :(深入理解CSS中的元素尺寸调整)
前端·javascript·css·ui·html·tensorflow
threelab30 分钟前
Three.js 加载 3D Tiles 瓦片数据 | 三维可视化 / AI 提示词
开发语言·前端·javascript·人工智能·3d·着色器
_洋1 小时前
Three.js加载 .obj文件 和 .gltf文件
开发语言·javascript·ecmascript
梦想CAD控件1 小时前
网页端对DWG图纸进行预览与批注(CAD轻量化)
java·前端·javascript
代码煮茶1 小时前
Vue3 埋点实战 | 从 0 搭建前端用户行为埋点系统
vue.js
JustNow_Man2 小时前
【opencode】安装使用daytona沙箱插件
android·java·javascript
wait2 小时前
Vibe Coding 开发技巧
前端·javascript·人工智能
ZengLiangYi2 小时前
Vercel AI SDK 入门:一行代码切换 LLM Provider
前端·javascript·aigc
三乐2283 小时前
原型链是什么?五分钟教会你
javascript
Delicate3 小时前
彻底搞懂JS原型:_ _ proto _ _与prototype的区别到底在哪?
javascript