el-tootip在只有超出显示省略号时启用在树形组件(带循环dom)的运用

原理就是在鼠标浮动到el-tootip包裹的元素时判断该元素的scrollWidth(元素内容的实际宽度)有没有超过clientWidth(元素的可是宽度)超出时显示省略号并设置disabled属性为false否则为true代码如下:
链接:https://www.jianshu.com/p/b39d2124d911
<el-tree
                ref="treeRef"
                :default-expanded-keys="defaultExpandedKeys"
                :node-key="id"
                :data="multiple ? treeData : treeAllData"
                :show-checkbox="multiple"
                :check-strictly="false"
                :current-node-key="!multiple ? selected : ''"
                :highlight-current="!multiple"
                :expand-on-click-node="false"
                :check-on-click-node="multiple"
                :props="defaultProps"
                :filter-node-method="filterNode"
                :default-checked-keys="multiple ? selected : []"
                @node-click="handleNodeClick"
                @check="handleCheckChange"
            >
                <template #default="{ node }">
                    <el-tooltip
                        :disabled="isShowTooltip"
                        :content="node.label"
                        popper-class="filter-box-item"
                        placement="top-start"
                        effect="light"
                    >
                        <div class="el-tree-node__label ellipsis" @mouseenter="onMouseOver($event)">
                            <span ref="refName">{{ node.label }}</span>
                        </div>
                    </el-tooltip>
                </template>
            </el-tree>
const isShowTooltip = ref(false);
const onMouseOver = (event: any) => {
    const ev = event.target;
    const evWeight = ev.scrollWidth;
    const contentWeight = ev.clientWidth;
    if (evWeight > contentWeight) {
        // 实际宽度 > 可视宽度  文字溢出
        isShowTooltip.value = false;
    } else {
        // 否则为不溢出
        isShowTooltip.value = true;
    }
};

 

posted @ 2024-02-28 11:21  影思密达ing  阅读(62)  评论(0编辑  收藏  举报