实现效果:

1.给下拉框设置最大宽度;

2.内容一行展示,不换行,多余部分显示省略号;

3.有省略号的那一行,加悬浮提示;

4.没有省略号的地方不加悬浮提示

---

代码展示:

<template><el-select :popper-append-to-body="false"><el-option v-for = "item in dataList" :key = "item.value" :label = "item.label" :value = "item.value"><el-tooltip effect="light" :disabled="isShowTooltip" :content="item.label" placement="top"><div class="option-item" @mouseover="spanMouseenter($event)">{{ item.label }} </div></el-tooltip></el-option></el-select>
</template>
<script>
export default {data() {return {isShowTooltip: true,};},methods: {spanMouseenter(e) {let target = e.targetif (target.clientWidth < target.scrollWidth) {this.isShowTooltip = false;} else {this.isShowTooltip = true;}},},
};
</script>
<style>
.option-item {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
.el-select /deep/ .el-select-dropdown__item {max-width: 600px;
}
</style>