vue2 开发记录

el-select

如何修改选择项的样式/el-select-dropdown__item 文字上下显示  

测试代码

        <div style='margin-left: 100px'><!--            测试代码--><el-select filterablesize='mini'><div class='xxx-el-select'><el-optionv-for='item in [{key:1,des:2,value:3}]':key='item.value':label='item.key':value='item.value'><span style='margin-right: 5px;'>{{ item.key }}</span><br><span style='color: #8492a6; font-size: 12px'>{{ item.des }}</span></el-option></div></el-select></div>

默认的样式为

可以看到设置的换行没有显示第二行的内容，原因是默认的选项的行高限制了显示，第二行内容被遮挡了。查看元素可以看到代码中是有值的。

尝试调整.el-select-dropdown__item的style

可以看到修改后其实选项是可以按照预期显示的，那么修改样式即可。

解决方法

在外套一层div，然后通过div的class xxx-el-select-select 在使用::v-deep 修改样式。

<style scoped lang='scss'>.xxx-el-select {::v-deep .el-select-dropdown__item {margin-bottom: 8px;height: auto;line-height: 20px !important;}
}</style>

修改后的效果