el-select启用filterable、multiple属性后，输入框错位的问题解决方法

2023/10/10
- 编程
0阅读

问题复现

代码大致如下：

<el-select
    multiple
    clearable
    filterable
>
    <el-option label="很长很长很长很长很长的内容" value="1" ></el-option>
    <el-option label="内容2" value="2" ></el-option>
</el-select>

此时选择2个选项后，效果如下：

问题分析

查看HTML结构发现，底部出现一行空白的原因是：启用filterable属性会允许用户搜索内容，此时空白区域为搜索输入框的内容。

解决方法

重置el-select的样式，因为启用filterable属性后，会多出一个.el-select__input样式，则可以通过CSS的:has功能重置css样式

.el-select:has(.el-select__input) {
    >.el-select__tags {
        flex-wrap: nowrap;
        .el-tag {
            max-width: 50%;
        }
    }

    >.el-select__input {
        flex: 1;
    }
}

其他推荐内容

chrome与firefox的点击事件差异

2023/10/10
- 编程

chrome与firefox的点击事件差异

2023/10/06
- 日常

Hexo迁移记录

评论区