element select选择框修改样式

今天遇到一个需求，需要修改select 下拉菜单的需求，以前改ui框架的样式也不少了，还是轻车熟路，简单粗暴，上来就/deep/深度选择器，保存刷新，发现，并没有修改到，尴尬了，看看css，懵了，select选择器下拉框并没有在body里面，而是和script是平级关系？哈？

看看官方给出了两个属性 popper-class（Select 下拉框的类名） popper-append-to-body（是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false）

这下就简单多了，就不要使用/deep/选择器了，因为可能会影响到同类名的元素

// 只需要给外层的el-select设置 popper-append-to-body 和 popper-class就可以了
// 把他当成单独的类来写
<el-select v-model="value" :popper-append-to-body="false" popper-class="selectinfo">
     <el-option
	     v-for="item in cities"
	     :key="item.value"
	     :label="item.label"
	     :value="item.value"
     >
	     <span>{
     {
      item.label }}</span>
	     <span>{
     {
      item.value }}</span>
     </el-option>
 </el-select>

// css
.selectinfo{
     
     .el-scrollbar{
     
         .el-scrollbar__wrap{
     
             .el-select-dropdown__list{
     
                 .el-select-dropdown__item{
     
                     height: 50px;
                     span{
     
                         display: block;
                         height: 20px;
                     }
                 }
             }
         }
     }
 }

修改以后的效果图

这是另外一个和它平级的下拉框，并没有受到影响，所以，还是少用/deep/，哈哈哈哈