场景
使用elementui的select组件时,有时候需要去修改下拉框的样式,可是当去修改时才发现问题:
(下拉框el-select-dropdow和app是同级),如下图:
那这种情况下我们在单个组件里面写scoped样式就无法生效,在全局写又会影响到所有的下拉框。这显然不是我们想看到的。
解决方案
翻阅文档发现为了不全局污染,select组件中,提供了一个popper-class属性(element-select),所以给select组件加上这个属性,就可以通过这个类下修改样式了。
// template popper-class="virtualSelect"
<el-select v-model="mediaAccount" popper-class="virtualSelect">
<el-option v-for="(item,index) in mediaAccountArr" :label="item.mediaAccountId"
:value="item.mediaAccountId" :key="index"></el-option>
</el-select>
<style>
.virtualSelect .el-scrollbar .el-scrollbar__bar.is-vertical{
width: 0; // 修改滚动条的宽度为0
}
</style>
通过自定义的类名就可以修个单个el-select组件而不影响全局的了。