在vue+elementUI使用中,控件el-select组件在设置了宽度,且应用filterable属性,在输入搜索时,el-select会被撑开且输入光标会换行。解决思路如下:

设置el-select的最大宽度,及选中后的div的最大宽度,设置搜索时的输入框input的最大宽度,保证el-select的宽度 > maxWidth( el-tag.el-tag--info.el-tag--mini)+maxWidth(.el-select__input.is-mini)。

代码如下:

控件引用:

<el-select v-model="values" multiple filterable collapse-tags placeholder="无限制" size="mini" style="width: 251px;">
            <el-option v-for="item in groups" :key="item.dept_name" :label="item.dept_name" :value="item.dept_name" style="width: 251px">
            </el-option>
    </el-select>

样式设置:

.el-select.el-select--mini {
        .el-input .el-input--mini .el-input--suffix {
            input {
                height: 20px !important;
            }
        }

        .el-tag.el-tag--info.el-tag--mini {
            float: left;

            &:first-child {
                margin-top: 5px;

                & .el-select__tags-text {
                    max-width: 80px !important;
                    width: 80px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    display: inline-block;
                }

                & .el-tag__close {
                    top: -5px !important;
                }
            }

            &:last-child {
                margin: 6px 0 2px 6px;
                display: inline-block;

                & .el-select__tags-text {}
            }
        }

        & .el-select__input.is-mini {
            max-width: 50px !important;
            width:50px;
        }
    }

实现效果如下:

Logo

前往低代码交流专区

更多推荐