<html>
<head>
<title></title>
<script src="./jquery-3.1.0.js"></script>
</head>
<body>
<select class="my_selected" data-edit-select="1" onmousedown="if(this.options.length>3){this.size=8}" onblur="this.size=0" onchange="this.size=0" style="position:absolutez-index:1">
<option selected>选择</option>
<option>一</option>
<option>二</option>
<option>三</option>
<option>四</option>
<option>五</option>
<option>六</option>
<option>七</option>
<option>八</option>
<option>九</option>
<option>十</option>
</select>
</body>
</html>
<select style=" width:100px" size="1" multiple="multiple"><option value="1">1</option>
<option value="1">1</option>
</select>
select 的size 属性 决定了它显示几个选项， 如果多出来的 就会自动变成滚动条了。
你可以试一下。
<select style=" width:100px" size="3" multiple="multiple">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
size = 3 就是显示3个 其他 滚动条显示的意思。
1.出现横向滚动条给select加个下拉框的类名 popper-class="new-select"
<el-select
v-model="queryParams.documentIds"
placeholder="请选择"
filterable
multiple
size="small"
style="width: 240px"
class="du-select"
popper-class="new-select"
>
<el-option
v-for="item in fileOptions"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
思路：设置下拉菜单的最大宽度，然后文字超出时，出现横向滚动条。
.new-select {
.el-select-dropdown {
max-width:300px
left: 0 !important
box-shadow: 0px 2px 4px 0 rgb(0 0 0 / 10%)
}
.el-select-dropdown__item {
display: inline-block
}
.el-select-dropdown__item span {
display: inline-block
min-width: 250px
padding-right: 20px
}
.el-select-dropdown__wrap {
margin-bottom: -20px !important
width: 300px
overflow: scroll
}
}
效果如下：
2.选中下拉之后select中文字溢出问题
给select加个class class="du-select"
::v-deep {
.du-select .el-select__tags {
// height: 40px
white-space: nowrap
overflow: hidden
flex-wrap: nowrap
}
.du-select .el-select__tags-text {
display: inline-block
max-width: 135px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
}
.du-select .el-tag__close.el-icon-close {
top: -6px
right: -4px
}
}
效果如下：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）