Element-UI 之 Select 选择器

た入场券 2023-02-20 07:24 32阅读 0赞

在使用Vue开发 SPA PC 端 管理系统项目时 ，Select 选择器必不可少，今天来看看Select 选择器的基本使用及问题解决

基本使用就不多说了 ，看文档就可以：[https://element.eleme.cn/\#/zh-CN/component/select][https_element.eleme.cn_zh-CN_component_select]，建议可以在官网上把 Select 选择器的实现效果 方法属性都熟悉一下，那么我要说的是，Select 怎么自定义他的样式呢？多数情况下我们想修改Element-UI 的样式，往往是通过审查元素 找到对应的类 或者自定义一个类进行样式覆盖或者修改，可是对于Select 选择框，真的有那么几分钟我开始怀疑自己 ，怎么设置都不好使。

那么先检查元素看看 select 选择框的类是什么，该怎么定义

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

第一我直接对el-select-dropdown 类进行重复设置，我想改的是z-index 等级值，可是试了很多遍就是不好使 加 !important 等等操作都没有作用，最后我发现 设置的样式根本都没有生效，因为下拉框根本没有再vue app 根组件中，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1][]

如上可以看到，el-select-dropdown 和 app 都在body 中 属于同等级，所以我们写的自定义样式在当前组件 以及自定义的全局样式根本就没有起作用，**需要写在 index.html 的style 样式中。**

select 选择器的自定义类 ： **popper-class="customSelect"** 在类 customSelect 中你可以自定义自己的样式及功能，因为页面中有很多地方会使用选择框，所以要是用自定义类，要不然在index.html 中直接使用 el-select-dropdown ，及内部的其他类，会改变所有选择器的样式。

<el-select v-model="value" placeholder="请选择" popper-class="customSelect">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
    </el-select>

而我发现这个样式的契机是页面要改变 选择器弹框的 z-index 显示等级，因为PC端页往往都是header + aside+main,main 区域中有搜索下拉框，但当页面滑动的时候，发现 输入框已经隐藏到了header 下面 但是 选择框却还在header 上面，希望的是 选择下来框可以一起滑动到header 下面。

原来的效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 2][]

期望修改后的结果：可以随着输入框隐藏到header 下面

![20200625122324412.PNG][]

实现代码，在index.html 的style 中定义：需要加important ,审查元素看 z-index 定义在行内元素中。

.customSelect {
        z-index: 666 !important;
      }

以上记录我对select选择器自定义样式的整懵的瞬间。**不能单单修改header 的z-index 等级** ，因为会影响到其他的弹窗效果，比如MessageBox 提示 ，还是本着修改当下，不影响其他的原则。

[https_element.eleme.cn_zh-CN_component_select]: https://element.eleme.cn/#/zh-CN/component/select
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200625111057423.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200625114635613.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200625122038247.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ==,size_16,color_FFFFFF,t_70
[20200625122324412.PNG]: https://img-blog.csdnimg.cn/20200625122324412.PNG