element Plus 中el-tooltip 和 el-popover超出宽度显示文字提示 否则不提示

 1 <el-tooltip  :content="node.label" placement="bottom" effect="light" :disabled="isShowTooltip">
 2     <span class="treeLabel" @mouseenter="visibilityChange($event)"> {{ node.label }}</span>
 3 </el-tooltip>
 4 
 5 <!--或者-->
 6 <!--<el-popover :content="item.remark"  :width="320"  trigger="hover" placement="bottom" :disabled="isShowTooltip">
 7         <template #reference>
 8              <div class="remark"  @mouseenter="visibilityChange($event)">{{ item.remark }}</div>
 9         </template>
10 </el-popover>-->

 1  const isShowTooltip = ref(false)
 2 
 3 // 是否显示tip
 4     function visibilityChange (event) {
 5         const ev = event.target
 6         const evWeight = ev.scrollWidth
 7         const contentWeight = ev.clientWidth
 8         if (evWeight > contentWeight) {
 9           // 实际宽度 > 可视宽度  文字溢出
10           isShowTooltip.value = false
11         } else {
12           // 否则为不溢出
13           isShowTooltip.value = true
14         }
15     }

.treeLabel ,.remark {
    white-space: nowrap;
    overflow: hidden;
     text-overflow: ellipsis;
}