【vue-超出内容时 el-tooltip 提示框才显示，没有超出不显示】

使用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
}