选项过多:当选择的选项数量较多时,默认的多选显示方式可能会导致下拉框高度剧增。 样式设置不当:未对 el-select 组件的样式进行适当设置,如未限制高度或未处理换行问题。2. 解决方案 方案一:使用 collapse-tags 属性 Element UI 的 el-select 组件提供了 collapse-tags 属性,当设置为 true 时,多选的标签会在数量...
网上搜了很多文章,几乎都是单独设置el-select__tags-text的max-width,如果页面有很多不同宽度的el-select就比较麻烦了,下面是通过refs对不同的el-select的max-width进行修改 <el-select v-model="form.operation_center" size="small" style="width: 200px;" clearable filterable multiple collapse-tags ref="t...
// 如果下拉框需支持搜索功能,el-select则需要更大的宽度才不至于换行 if (this.$attrs.filterable === '' || this.$attrs.filterable === true) { totalWidth += 125; } if (totalWidth <= minWidth) { totalWidth = minWidth; } // el-select的宽度必须大于el-select__tags的宽度,才不会覆盖清...
让element-ui中el-select不换行的方式 技术标签:vue.js 在elementui中,使用select多选的方式,往往会把高度撑开了 我们查看console中,dom元素,发现产生如下元素,把高度给撑开了 解决方案如下: 在style中,增加如下css(不能在scoped中添加,在scoped中写不会生效) .el-select__tags { flex-wrap: nowrap; overflow:...
使用el-select的多选下拉选择时,如果默认的选择会撑开input,显示所选的全部内容; 这样子很难看,样式还不整齐。 文档中有tag的形式展现,设置collapse-tags属性将它们合并为一段文字: 就不会出现上述的情况了。 但是当多选的内容多长的时候,后面还是会撑开换行,照样使样式不整齐: 看了上面的element元素发现: 这时候...