解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题

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;
}

}
效果如下：

微信图片_20211103113048.png

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;
}
}

效果如下：

微信图片_20211103113051.png