使用disabled属性控制el-tooltip的content显示与隐藏

<div v-for="(item,index) in treeData" :key="item.id" @click.stop="changeChecked(item)"><el-card shadow="hover" :class="[{ 'select-item': item.checked }, 'list-item']"><div class="item-main"><el-icon><Document /></el-icon><div class="knowledge-name Knowledge" @mouseover="onMouseOver(index)"><el-tooltip class="box-item" effect="dark" :disabled="isShowTooltip" :content="item.label" placement="top"><span ref="KnowledgeContent"> {{ item.label }}</span></el-tooltip></div><el-link class="del-btn" type="danger" :icon="ElIconDelete" @click.stop="delNode(item)" /></div></el-card></div>

定义isShowTooltip变量控制disabled，经过onMouseOver鼠标悬停事件改变isShowTooltip值

const isShowTooltip = ref(true)
//note el-tooltip超出内容时提示框才显示，没有超出不显示
const onMouseOver = i => {const parentWidth = proxy.$refs.KnowledgeContent[i]?.parentNode?.offsetWidth // 获取当前元素父级可视宽度const contentWidth = proxy.$refs.KnowledgeContent[i]?.offsetWidth // 获取当前元素可视宽度isShowTooltip.value = contentWidth <= parentWidth
}