解决Element Plus中Select在El Dialog里层级过低的问题(修改select选项框样式)_GIS数据共享

解决Element Plus中Select在El Dialog里层级过低的问题(修改select选项框样式)

2024-02-18 17:45:46  浏览:1633  作者:管理员
解决Element Plus中Select在El Dialog里层级过低的问题(修改select选项框样式)

        在开发过程中发现组件中el-select点击三下才弹出下来,查询样式后发现层级过低,每次点击下拉菜后层级会逐步增加,本文通过定义组件样式来处理遇到的问题及遇到的坑。本文未解决vue层级自增的问题,而是直接处理了层级问题,但思路可以作为参考

一、自定义组件样式

Element Plus提供了一个名为popper-class的属性,用于指定Popper.js弹出框的自定义样式类。通过这个属性,我们可以为<el-select>组件的下拉选项框添加自定义样式,并设置合适的z-index值,从而解决层级过低的问题。

1. 添加popper-class属性

<el-select>组件中添加popper-class属性,并为其指定一个自定义的样式类名,例如select_popper

<template>
  <div>
    <el-select v-model="triggerjson_select_value" placeholder="Select" popper-class="select_popper">
      <el-option v-for="item_select in triggerjson_select_options" :key="item_select.value" :label="item_select.label"
        :value="item_select.value" />
    </el-select>
  </div>
</template>

2. 添加自定义样式

在样式表中添加对应的.select_popper样式,设置合适的z-index值。这里我们设置z-index为99999,以确保<el-select>的下拉选项框在其他元素之上正确显示。

.select_popper {
  z-index: 99999 !important;
}

二、解决坑,定义的样式不起作用

重新定义style,不要使用scoped

<style lang="scss">
.select-popper {
  z-index: 99999 !important;
}
</style>
扫码查看

评论区

共 0 条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

【随机内容】

返回顶部