el-tooltip根据条件控制显示，超出父级宽度展示提示词（多层循环情况）

最新推荐文章于 2025-09-08 17:07:03 发布

原创最新推荐文章于 2025-09-08 17:07:03 发布 · 901 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

Vue 专栏收录该内容

24 篇文章

订阅专栏

文章讲述了如何在Vue.js应用中，利用el-tooltip组件并结合v-for指令在多层循环中实现内容的条件显示。通过调整isShowTooltip状态和动态绑定popper-class，以及在鼠标悬停事件中计算元素宽度来决定tooltip是否隐藏，同时使用CSS类隐藏超出父元素宽度的内容。

一、el-tooltip根据条件控制显示（多层循环情况）

<div class="box" v-for="(item, index) in detailList" :key="index">
	<div class="title">
		<i class="el-icon-document"></i>
		<p>{{ item.elementName }}</p>
	</div>
	<el-row class="item" v-for="(cItem, cIndex) in item.children" :key="cIndex">
		<el-col :span="12">
			<div class="name">
				<el-tooltip effect="dark" :content="cItem.elementName" placement="bottom" :popper-class="isShowTooltip ? 'hide-tooltip' : ''">
					<span :class="`showMenuClass_${cItem.elementId}`" @mouseenter.stop.prevent="onMouseOver(cItem.elementId, 'name')" @mouseleave.stop.prevent="isShowTooltip = true">{{ cItem.elementName }}</span>
				</el-tooltip>
			</div>
		</el-col>
		<el-col :span="8">
			<span>
				{{ cItem.fundCount }}
			</span>
		</el-col>
		<el-col class="option" :span="4">
			<el-button>编辑</el-button>
		</el-col>
	</el-row>
</div>

setup() {
	const state = reactive({
		isShowTooltip: true,
		showMenuClass: '',
	})
	function onMouseOver(id: string) {
		state.isShowTooltip = true;
		let data = null;
		state.showMenuClass = `showMenuClass_${id}`; // 重点！！！
		data = $(`.${state.showMenuClass}`)[0];
		let parentWidth = (data.parentNode as any).offsetWidth;
		let contentWidth = data.offsetWidth;
		clearTimeout(timer);
		timer = setTimeout(() => {
			if (contentWidth > parentWidth) {
				state.isShowTooltip = false;
			}
		}, 300);
	}
}

.hide-tooltip {
	visibility: hidden !important;
}