- 先看现象
省略号显示
<el-select
v-model="configs.domain.secondLevel"
style="width: 100%"
filterable
allow-create
default-first-option
placeholder="请输入二级网段名称,例如:广州研发中心/研发网"
@focus="setOptionWidth"
>
<el-option
v-for="item in secondDomainOption"
:key="item.value"
:label="item.label"
:value="item.value"
:style="{ width: selectOptionWidth }"
></el-option>
</el-select>
data() {
return {
selectOptionWidth: null
}
}
setOptionWidth(event) {
this.$nextTick(() => {
this.selectOptionWidth = event.srcElement.offsetWidth + 'px';
});
},
滑动显示
<el-select
v-model="configs.domain.secondLevel"
style="width: 100%"
filterable
allow-create
default-first-option
placeholder="请输入二级网段名称,例如:广州研发中心/研发网"
@focus="setOptionWidth"
popper-class="my-select"
>
<el-option
v-for="item in secondDomainOption"
:key="item.value"
:label="item.label"
:value="item.value"
:style="{ width: selectOptionWidth }"
></el-option>
</el-select>
.my-select .el-select-dropdown__item {
overflow: visible;
display: block;
}