Element-UI 之 Select 选择器

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

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

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

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

如上可以看到，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 下面。

原来的效果：

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

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

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

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