解决elementUI中的el-select,使用filter过滤,搜索换行的问题。
在vue+elementUI使用中,控件el-select组件在设置了宽度,且应用filterable属性,在输入搜索时,el-select会被撑开且输入光标会换行。解决思路如下:设置el-select的最大宽度,及选中后的div的最大宽度,设置搜索时的输入框input的最大宽度,保证el-select的宽度 > maxWidth( el-tag.el-tag--info.el-ta
·
在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;
}
}
实现效果如下:
更多推荐
已为社区贡献4条内容
所有评论(0)