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>
相关推荐
前端小卡拉36 分钟前
用了大半年 AI 编程工具,我才搞懂 Skill 到底是什么
前端·javascript
郭邯43 分钟前
用 Intl.DateTimeFormat 手写一个时区转换器,顺便聊聊我和 AI 结对编程的日常
前端·javascript
mashirro1 小时前
记一次基于ruoyi-vue新增小程序服务模块,小程序登陆相关
vue.js·小程序·mybatis
AI砖家1 小时前
React Native 打包体积优化指南:在保证功能正常的前提下把包压到最小
javascript·react native·react.js·打包优化
无糖可可果2 小时前
从零看懂 JWT 登录鉴权:一个 React Demo 的完整拆解
前端·javascript
BreezeJiang2 小时前
JWT 登录不是存个 token:React 鉴权真正要闭合的是一条数据流
javascript·react.js·axios
四千岁2 小时前
稀疏向量BM25Retriever不支持中文怎么办?jieba来帮忙
前端·javascript·后端
这是个栗子2 小时前
【JS代码分析】前端鉴权基础:Token 的本地存储与状态重置实践
开发语言·前端·javascript
界面开发小八哥4 小时前
界面控件DevExpress Blazor v26.1新版亮点 - TreeList & 数据编辑器
javascript·编辑器·.net·界面控件·blazor·devexpress·用户界面
风月说与山鬼4 小时前
二、uni-app入口文件(main.js)
javascript·uni-app