Element-ui 给el-select添加唯一class名,修改个别el-option样式

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

       按以上常规的修改Element-ui样式的方法,添加class = "optionsContent",不生效,给el-select加父标签

来包裹el-select也没用。在控制台中查看渲染结果可以看到,class名和div根本没有被渲染出来。

Element-ui 给el-select添加唯一class名,修改个别el-option样式_第1张图片

这里需要将class改为propper-class

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

Element-ui 给el-select添加唯一class名,修改个别el-option样式_第2张图片

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

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

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

 

你可能感兴趣的:(Element-ui)