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

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

时间:2024-02-28 11:37:17浏览次数:25  
标签:el false 省略号 dom isShowTooltip const ev

原理就是在鼠标浮动到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 onm ouseOver = (event: any) => {
    const ev = event.target;
    const evWeight = ev.scrollWidth;
    const contentWeight = ev.clientWidth;
    if (evWeight > contentWeight) {
        // 实际宽度 > 可视宽度  文字溢出
        isShowTooltip.value = false;
    } else {
        // 否则为不溢出
        isShowTooltip.value = true;
    }
};

 

标签:el,false,省略号,dom,isShowTooltip,const,ev
From: https://www.cnblogs.com/lsc-boke/p/18039619

相关文章

  • Qt 随机数生成器:QRandomGenerator
    一、描述QRandomGenerator可用于从高质量随机数生成器生成随机值。与C++随机引擎一样,QRandomGenerator可以通过构造函数使用用户提供的值作为种子。播种时,此类生成的数字序列是确定性的。也就是说,给定相同的种子数据,QRandomGenerator会生成相同的数字序列。给定不同的种......
  • Java中使用Jsoup实现网页内容爬取与Html内容解析并使用EasyExcel实现导出为Excel文件
    场景Pythont通过request以及BeautifulSoup爬取几千条情话:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/87348030Node-RED中使用html节点爬取HTML网页资料之爬取Node-RED的最新版本:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124182289Jsoup......
  • Qt 生成随机数 qrand、QRandomGenerator
    //老方法//利用qrand和qsrand生成随机数//位于QtGlobal中//例,生成一个0和10之间的随机数1qsrand(QTime::currentTime().msec());//设置种子,该种子作为qrand生成随机数的起始值,RAND_MAX为32767,即随机数在种子值到32767之间2qrand()%10;//新方法//利用QRandomGenerator类......
  • Sentinel系列之(十)规则持久化
    规则持久化1.是什么在Sentinel中配置的规则在资源所在的服务重启后就消失了以cloudalibaba-sentinel-service8401为例进行说明启动单机版Nacos启动Sentinel启动cloudalibaba-sentinel-service8401为cloudalibaba-sentinel-service8401中的/rateLimit/byUrl这个接口配置Sen......
  • Sentinel系列之(九)服务熔断
    服务熔断Sentinel整合Ribbon和OpenFeign@SentinelResource的fallback1.Ribbon系列1.1服务提供者新建cloudalibaba-provider-payment9003和cloudalibaba-provider-payment90049003和9004是一样的,以9003为例建Module【cloudalibaba-provider-payment9003】改POM<?xml......
  • Sentinel系列之(八)@SentinelResource
    @SentinelResource相当于Hystrix中的@HystrixCommand1.按资源名称限流环境说明启动了单机版的Nacos启动了Sentinel基于项目cloudalibaba-sentinel-service8401继续改造增加RateLimitControllerpackagecom.atguigu.springcloud.alibaba.controller;importcom.ali......
  • Sentinel系列之(七)系统规则
    系统规则【系统自适应限流】官网:https://github.com/alibaba/Sentinel/wiki/系统自适应限流1.基本介绍从整体维度对应用入口流量进行控制【其他规则是针对接口的,系统规则是针对所有接口的】违反规则后整个系统不可用阈值类型Load自适应(仅对Linux/Unix-like机器生效):系......
  • Sentinel系列之(六)热点参数限流规则
    热点参数限流规则......
  • Sentinel系列之(五)降级规则
    降级规则官网:https://sentinelguard.io/zh-cn/docs/circuit-breaking.html1.基本介绍​ Sentinel熔断降级会在调用链路中某个资源出现不稳定状态时(例如调用超时或异常比例升高),对这个资源的调用进行限制,让请求快速失败,避免影响到其它的资源而导致级联错误。​ 当资源被降级......
  • Sentinel系列之(四)流控规则
    流控规则流量控制官网:https://github.com/alibaba/Sentinel/wiki/流量控制1.基本介绍资源名:唯一名称,默认请求路径针对来源:Sentinel可以针对调用者进行限流,填写微服务名,默认default(不区分来源)阈值类型/单机阈值:QPS(每秒钟的请求数量):当调用该api的QPS达到阈值的时......