当前位置:   article > 正文

解决Element Plus中Select在El Dialog里层级过低的问题(修改select选项框样式)_select 下拉框结合el-dialog

select 下拉框结合el-dialog

Element Plus是Vue.js的一套基于Element UI的组件库,提供了丰富的组件用于构建现代化的Web应用程序。其中,<el-select>是一个常用的下拉选择器组件,但在某些情况下,当<el-select>组件嵌套在<el-dialog>(对话框)组件中时,可能会出现层级过低的问题。本文将介绍如何使用popper-class属性解决这个问题,使得<el-select><el-dialog>内部能够正确显示。

问题描述

在使用Element Plus的<el-dialog>组件时,很多情况下我们需要在对话框内部使用<el-select>组件,以提供用户选择的功能。然而,由于<el-dialog>会创建一个新的层级(z-index)上下文,而<el-select>默认的z-index值较低,可能导致下拉选项框被其他元素覆盖,无法正确显示。最近遇见了这个问题后通过查阅最终解决,特此分享.

解决方案

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

2. 添加自定义样式

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

.select_popper {
  z-index: 99999 !important;
}
  • 1
  • 2
  • 3

效果展示

经过上述步骤,我们成功地将<el-select>的下拉选项框的z-index值调整为99999,使其在<el-dialog>内部能够正确显示,不被其他元素遮挡。在这里插入图片描述

总结

通过使用popper-class属性,我们可以轻松解决Element Plus中<el-select>组件在<el-dialog>内部层级过低的问题。通过设置合适的z-index值,确保下拉选项框正确显示,并提供更好的用户体验。使用这一技巧,我们能够更灵活地在Element Plus的组件中创建复杂的交互界面,提升Web应用程序的用户友好性和可用性。

题外话

最近为了解决这个问题翻了挺多博客,也在社区里提过问题,有些朋友说通过popper-append-to-body 属性解决,但在官方文档中该属性已经被弃用.在这里插入图片描述
简单了解了一下他的原理:
我们经常使用的弹出窗口、工具提示或下拉菜单的组件库Element UI和Bootstrap Vue,这些组件通常使用Popper.js来管理元素的定位和层叠顺序。其中,popper-append-to-body是Popper.js的一个属性,用于控制弹出元素是否被附加到文档的body中。
在这里插入图片描述
而在弃用后的element plus 里无论是否使用该属性,下拉框始终在body中.
在这里插入图片描述
使用上述的popper-class属性可以解决样式和层级的问题.

以上就是解决Element Plus中Select在el-Dialog里层级过低问题的方法,如果本文对您有帮助,请一键三连!!!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/81920
推荐阅读