当前位置: 首页 > ds >正文

el-tree 点击父节点无效,只能选中子节点

背景:

el-tree树形控件点击的时候,我们不希望点击父节点,只希望点击子节点触发效果。

实际使用示例:摄像头树状图,根据不同市级区域划分,我们只希望点击子节点【摄像头】有效,点击具体的摄像头调取网络接口,点击市级区域不调取接口。

官网示例:

官网示例代码:

<template><el-treestyle="max-width: 600px":data="data":props="defaultProps"default-expand-all@node-click="handleNodeClick"/>
</template><script lang="ts" setup>
interface Tree {label: stringchildren?: Tree[]
}const handleNodeClick = (data: Tree) => {console.log(data)
}const data: Tree[] = [{label: 'Level one 1',children: [{label: 'Level two 1-1',children: [{label: 'Level three 1-1-1',},],},],},{label: 'Level one 2',children: [{label: 'Level two 2-1',children: [{label: 'Level three 2-1-1',},],},{label: 'Level two 2-2',children: [{label: 'Level three 2-2-1',},],},],},{label: 'Level one 3',children: [{label: 'Level two 3-1',children: [{label: 'Level three 3-1-1',},],},{label: 'Level two 3-2',children: [{label: 'Level three 3-2-1',},],},],},
]const defaultProps = {children: 'children',label: 'label',
}
</script>

备注:从上面这个示例我们可以知道,点击父节点或者点击子节点都会触发节点点击事件,即触发节点点击事件@node-click="handleNodeClick"

要想仅仅点击子节点触发事件@node-click="handleNodeClick",需要在handleNodeClick事件内部判断点击的是否是子节点或者父节点,满足条件在执行,否则不执行。

实际效果图:

备注:在这个实际代码中,我们就可以判断type=== 100是否满足条件,满足的执行,不满足的不执行。

http://www.xdnf.cn/news/20054.html

相关文章:

  • [BUUCTF-OGeek2019]babyrop详解(包含思考过程)
  • C++:类和对象(上)
  • 微软rStar2-Agent:新的GRPO-RoC算法让14B模型在复杂推理时超越了前沿大模型
  • 卷积操作原来分3种
  • 2025年工科生转型必考的十大高含金量证书!
  • 腾讯云建站多少钱?2025年最新价格曝光,0基础也能做出专业网站?实测真假
  • flutter专栏--深入剖析你的第一个flutter应用
  • 从一次Crash分析Chromium/360浏览器的悬空指针检测机制:raw_ref与BackupRefPtr揭秘
  • 留学第一天,语言不通怎么办?同声传译工具推荐来了
  • 常用假设检验方法及 Python 实现
  • 亚马逊云代理商:配置安全组规则步骤
  • kafka Partition(分区)详解
  • nestjs 阿里云服务端签名
  • 深度学习篇---SGD+Momentum优化器
  • Photoshop - Photoshop 触控手势
  • 电表连网不用跑现场!耐达讯自动化RS485转Profinet网关 远程配置+技术支持,真能做到!
  • ASP.NET 实战:用 SqlCommand 打造一个安全的用户注册功能
  • SIC8833芯片智能充气泵设计方案
  • 原创未发表!POD-PINN本征正交分解结合物理信息神经网络多变量回归预测模型,Matlab实现
  • 第二家公司虽然用PowerBI ,可能更适合用以前的QuickBI
  • pip completion工具作用(生成命令行自动补全脚本)(与pip-bash-completion区别)
  • 东土智建 | 让塔吊更聪明的“四大绝技”工地安全效率双升级
  • EasyMeeting-注册登录
  • PDF-XChange Editor:全功能PDF阅读和编辑软件
  • 《华为基本法》——企业文化的精髓,你学习了几条?
  • 技术实战:从零开发一个淘宝商品实时数据采集接口
  • 《嵌入式硬件(一):裸机概念与80c51单片机基础》
  • Docker 运行 PolarDB-for-PostgreSQL 的命令,并已包含数据持久化配置
  • Scrapy框架实战:大规模爬取华为应用市场应用详情数据
  • 实现 TypeScript 内置工具类型(源码解析与实现)