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>
相关推荐
Mr Xu_1 分钟前
解决 Vue + Axios 热更新导致响应拦截器重复注册的问题
前端·javascript·vue.js
Coder_preston7 分钟前
JavaScript学习指南
开发语言·javascript·ecmascript
Jinuss13 分钟前
源码分析之React中Scheduler调度器的最小二叉堆
javascript·算法·react.js
a11177616 分钟前
电流卡片特效(html网页 开源)
javascript·css·css3
狗都不学爬虫_18 分钟前
JS逆向 -最新版 盼之(decode__1174、ssxmod_itna、ssxmod_itna2)纯算
javascript·爬虫·python·网络爬虫·wasm
天天进步201518 分钟前
透明的可观测性:剖析 Motia Workbench 与插件系统架构
javascript
夏河始溢20 分钟前
一八四、Zustand 状态管理详解、与 Redux、MobX 的对比分析
前端·javascript·react.js·状态管理·zustand
wangmengxxw20 分钟前
设计模式 -详解
开发语言·javascript·设计模式
Code小翊26 分钟前
TypeScript 核心语法速查
前端·javascript·typescript
家里有只小肥猫28 分钟前
uniApp下拉渐变头部 拿来即用
前端·javascript·uni-app