element-ui select组件的option标签修改样式不生效的坑!!

260 阅读1分钟
<el-select  
v-if="options.length > 0"  
@change="handleSelectKeyChange"  
:value="searchKey"  
slot="prepend"  
style="width:110px"  
placeholder="请选择"  
:popper-append-to-body="false"
popper-class="select-popper"
>
<el-option  
v-for="item in options"  
:label="item.label"  
:value="item.value"  
:disabled="item.disabled"  
:key="item.value">  
</el-option>  
</el-select>

 

在el-select选择器上加一定要加上下面两个属性

:popper-append-to-body="false"

popper-class="select-popper"

 

<style lang="scss" scoped>

::v-deep .select-popper {

  max-width: 360px !important;

}

::v-deep .select-popper .el-select-dropdown__item {

  display: inline-block !important;

}

 ::v-deep .select-popper .el-select-dropdown__item span {

  min-width: 205px !important;

  display: inline-block !important;

}

</style>