Vue 的 el-select 下拉选项中，只有当文字超出时才显示提示框，未超出的则不显示

本文主要是介绍Vue 的 el-select 下拉选项中，只有当文字超出时才显示提示框，未超出的则不显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue 的 el-select 下拉选项中，只有当文字超出时才显示提示框，未超出的则不显示

<template><div><el-select v-model="selected" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"><el-tooltipclass="option-tooltip":disabled="!isTextOverflow(item.label)":content="item.label"placement="top-start":offset="[0, 10]"><div class="option-item">{{ item.label }}</div></el-tooltip></el-option></el-select></div>
</template><script>
export default {data() {return {selected: '',options: [{ value: '1', label: '这是一个超长的选项文字，当文字超出时会显示省略号' },{ value: '2', label: '短文字1' },{ value: '3', label: '短文字2' }]};},methods: {isTextOverflow(text) {const el = document.createElement('div');el.style.whiteSpace = 'nowrap';el.style.overflow = 'hidden';el.style.textOverflow = 'ellipsis';el.style.maxWidth = '100%';el.style.padding = '0';el.style.border = 'none';el.textContent = text;document.body.appendChild(el);const isOverflow = el.clientWidth < el.scrollWidth;document.body.removeChild(el);return isOverflow;}}
};
</script><style>
.option-item {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;max-width: 100%;
}.option-tooltip {pointer-events: auto !important;
}
</style>

这篇关于Vue 的 el-select 下拉选项中，只有当文字超出时才显示提示框，未超出的则不显示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---