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>

修改后的效果