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>
相关推荐
jaqi.l2 小时前
uni-app 小程序全局挂载分享功能,并动态配置页面是否可以分享
vue.js·小程序·uni-app
十年磨一剑~2 小时前
springboot+vue+mysql手搓一个管理系统
vue.js·spring boot·mysql
DEMO派2 小时前
CSS优先级规则以及如何提升优先级方案详解
前端·javascript·css·vue.js·reactjs·html5·angular.js
hhcccchh2 小时前
学习vue第十一天 Vue3组件化开发指南:搭积木的艺术
前端·vue.js·学习
小夏卷编程2 小时前
ant-design-vue 2.0 a-table 中实现特殊行样式,选中样式,鼠标悬浮样式不一样
前端·javascript·vue.js
一颗烂土豆2 小时前
ECharts 水球图不够炫?试试 RayChart 的创意可视化玩法
前端·vue.js·数据可视化
如果你好2 小时前
TypeScript 接口(interface)完全指南:语法、特性与实战技巧
vue.js·typescript
AI_56782 小时前
Webpack从“配置到提速”,4步解决“打包慢、体积大”问题
前端·javascript·vue.js
pinkQQx2 小时前
手把手搭建前端跨平台服务(IPlatform + iOS / Android / Web)
前端·javascript