vue2 开发记录

Franciz小测测2024-03-02 21:01

el-select

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

测试代码

javascript 复制代码

        <div style='margin-left: 100px'>
            <!--            测试代码-->
            <el-select filterable
                       size='mini'>
                <div class='xxx-el-select'>
                    <el-option
                        v-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 修改样式。

javascript 复制代码

<style scoped lang='scss'>

.xxx-el-select {
    ::v-deep .el-select-dropdown__item {
        margin-bottom: 8px;
        height: auto;
        line-height: 20px !important;
    }
}



</style>

修改后的效果