我们修改了列表项的样式，但是页面中可能会使用多个select组件，直接修改会影响全局样式，在页面渲染的时候，el-select总是会被渲染为仅次于body层级的div，我们没有办法通过父级限制它，所以我们需要给它自身添加一个class名。

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

       按以上常规的修改Element-ui样式的方法，添加class = "optionsContent"，不生效，给el-select加父标签<div class = "optionsContainter">来包裹el-select也没用。在控制台中查看渲染结果可以看到，class名和div根本没有被渲染出来。

这里需要将class改为propper-class

<el-select v-model="value" placeholder="请选择" popper-class = "optionsContent">

通过popper-class来自定义一个类，这样子在控制台可以看到，自定义的类渲染到页面上的效果，class名已经添加成功了

能获取到类名后，我们就能对select和el-option进行样式的修改，且不会影响其他的select组件

比如：设置某个select下的el-option的最大高度，且不影响其他select组件

.optionsContent /deep/ .el-select-dropdown__wrap{
    max-height:471px;
}