1.出現(xiàn)橫向滾動(dòng)條
給select加個(gè)下拉框的類名 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>

思路：設(shè)置下拉菜單的最大寬度，然后文字超出時(shí)，出現(xiàn)橫向滾動(dòng)條。
.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加個(gè)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