el-select 下拉框选项文字内容过长

很多时候下拉框的内容是不可控的，如果下拉框选项内容过长，势必会导致页面非常不协调，解决办法就是，单行省略加文字提示。

<el-select popper-class=”popper-class” :popper-append-to-body=”false” v-model=”value” placeholder=”请选择”>
<el-option
v-for=”item in options”
:key=”item.value”
:label=”item.label”
:value=”item.value”
>
<el-tooltip
placement=”top”
:disabled=”item.label.length<17″
>
<div slot=”content”>
<span>{{item.label}}</span>
</div>
<div class=”iclass-text-ellipsis”>{{ item.label }}</div>
</el-tooltip>
</el-option>
</el-select>

<script>
export default {
data() {
return {
options: [{
value: ‘选项1’,
label: ‘黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕’
}, {
value: ‘选项2’,
label: ‘双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶’
}, {
value: ‘选项3’,
label: ‘蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎’
}],
value: ”
}
}
}
</script>

<style scoped>
.el-select {
width: 300px;
}
.el-select ::v-deep .popper-class {
width: 300px;
}
.iclass-text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>

效果如下：

 

 

转自：https://blog.csdn.net/Amnesiac666/article/details/121156514