el-tree只能点击最后⼀级

王懿诺

已于 2022-10-18 10:40:04 修改

阅读量2.5k

点赞数

分类专栏： elementui vue UI框架 vue 文章标签： javascript 前端 vue.js

于 2022-10-17 18:16:12 首次发布

本文链接：https://blog.csdn.net/TodayStartWJH/article/details/127371324

版权

本文介绍了如何在Vue.js中配置el-tree组件，使其仅响应最后一级（叶子节点）的点击事件，避免非叶子节点的误操作。通过对节点数据的处理和事件监听，实现了这一功能，提升了用户体验。

摘要由CSDN通过智能技术生成

//el-tree点击事件
handleClick(e,node){
   
console.log(node,'点击了节点');
	if(e.label !== undefined){
   
		//此处为条件成立后的代

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

王懿诺

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue+Element ui树形控件右键菜单

qq_44956826的博客

04-12

2544

个人学习用文章目录需求一、按需引入ELEMENTUI组件二、实现菜单功能1.TEMPLATE2.JS3.STYLE4.data()三、效果图总结需求实现树形控件右键菜单功能，有添加文件、删除文件、重命名功能一、按需引入ELEMENTUI组件按需引入ELEMENTUI组件二、实现菜单功能 1.TEMPLATE 代码如下（示例）：  <el-tree :data="data" @.

el-tree只有最后一级可以选中

Nefertar的博客

12-02

4697

el-tree最后一级可以选择，其他禁用并把复选框隐藏

参与评论您还未登录，请先登录后发表或查看评论

vue3.2 element-plus el-tree仅点击子级最后一级高亮，父级不高亮

nlhhln的博客

06-12

1372

vue3.2 element-plus el-tree仅点击子级最后一级高亮，父级不高亮

Vue2设置el-tree数据处理、点击事件、色彩调整

最新发布

Ling_5230的博客

07-23

260

1.后端给的数据没有el-tree要求的label和children，所以需要自行处理一下2.一级节点和二级节点需要不同的点击效果，需要设置3.默认选中的背景色和字体色以及鼠标悬停的背景色都需调整。

单选el-tree组件,只可选最后一个层级

weixin_44899044的博客

05-30

3096

/ 输出父节点数组。label: '子节点1-1-1'label: '子节点1-1-2'label: '子节点1-1',parentMap: {} // 父节点映射关系。label: '子节点1-2'// 获取当前选中子节点的所有父节点。label: '节点1',label: '节点2'// 只选中最后一个层级节点。// 展开点击的节点。

el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点

yinzisang的博客

12-30

7653

设置el-tree层级线，并且只能选中无子节点的叶节点

el-tree 只显示最后一级节点的复选框

ZJWZJWBUWEN的博客

08-11

3697

转自博客园 VUE2 element-UL 树形控件只显示子级菜单的复选框 - 张铄洋 - 博客园 <div class="wrap"> <el-tree :data="testData" ref="tree" show-checkbox :check-strictly="true" :default-expand-all="true" node-key="id" :p

VueTreeselect 只能选择末级节点

xiaoyuer_2020的博客

02-18

1560

场景：有些需求会要求只能选择末级节点。

JS框选树只选择最后一级

明仔丶的博客

10-10

1784

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SelectProviderType.aspx.vb" Inherits="CgZtb.SelectProviderType" %> <%@ Register TagPrefix="myLoader" Namespace="CustomCo

2019年银盛支付面试题（Java开发工程师-微服务方向）

weixin_38747566的博客

12-02

1050

银盛⽀付说说springcloud的⼯作原理 springcloud由以下⼏个核⼼组件构成： Eureka：各个服务启动时，Eureka Client都会将服务注册到Eureka Server，并且Eureka Client还可以反过来从Eureka Server拉取注册表，从⽽知道其他服务在哪⾥ Ribbon：服务间发起请求的时候，基于Ribbon做负载均衡，从⼀个服务的多台机器中选择⼀台...

2021前端知识总结-部分解答-持续更新

JCat的博客

03-12

1271

一、h5c3部分 1.css实现垂直水平居中的方式？行内元素，父元素设置： div{ height:60px line-height:60px; text-align: center; } 块级元素，已知宽度 div { width:100px; margin:0 auto; } 块级元素，未知宽度-- flex/定位， flex布局 div{ display: flex; justify-content: center; align-items: ce

前端Reract面试题-------总结（经典）

LVHA529的博客

01-04

632

1.React中keys的作用是什么？ Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。 render () { return ( ‹ul› { this.state.list.map(({item, key}) =› { return ‹li key={key}›{item}‹/li› }) } ‹/ul› ) } 在开发过程中，我们需要保证某个元素的 key 在其同级元...

【Element】el-tree 只需要选中最末级节点(回显数据)

11-29

3050

筛选出没有下一级的节点（核心代码如下） console.log(SelectedObj.checkedNodes) // 这是选中的节点数组 this.chosedData.departmentList = SelectedObj.checkedNodes.filter(item => { return item.childList.length === 0 }) ...

element UI 树形数据只能选择最后一级只能单选树形单选树形检索

Taurus_666

06-23

6494

直接上代码，如有疑问，欢迎交流 template里面 <el-tree class="filter-tree" :data="assetBigClassTreeData"// 树形data数据，具体按照官方文档格式 :props="defaultProps" //自定义props配置，如严格按照官方格式无需添加此项， @check="checkChange" //checkbox 选项变化事件 node-key="id" //勾选时按照哪个值显示，必须是唯一的值 accordion c

element tree封装为可控制只可选末级或都可选(1)

莫逸雪的博客

12-16

2417

要求一:只可选择末级节点的数据,所以采用了只有末级节点有checkdbox来控制. 要求二:选择末级节点情况下,是控制单选的,采用给每个节点加disabled属性,已选择时其他设置为不可选. 要求三:后台传的数据(共三级节点,有的只有二级影响checkedbox展示)需要拿到数据后进行过滤要求四:实用性强,还需要满足节点都可选的业务,也就是说需要父组件传个flag值控制是都可选还是只有末节点可以传封装的组件代码: <template> <vab-dialog ref="di

ElementUI中el-tree树形控件给叶子节点添加事件/只允许选中（末）叶子节点

hupei

03-10

7743

ElementUI中el-tree树形控件给叶子节点添加事件/只允许选中（末）叶子节点

el-tree只在二级节点触发事件/只能点击最后一级

anny_mei的博客

06-11

2822

handleNodeClick (data, e) { console.log(data, '点击了节点') if (e.parent.data.label !== undefined) { this.dialogView = true } },

Element Plus 树形表格全选多选以及子节点勾选

shengjon的博客

10-24

633

【代码】Element Plus 树形表格全选多选以及子节点勾选。

el-tree 设置只能展开两级

06-06

要实现 el-tree 只能展开两级的功能，可以使用 el-tree 的 expand-on-click-node 和 show-checkbox 属性配合实现。具体做法如下： 1. 设置 expand-on-click-node 属性为 true，这样单击节点时会自动展开/收缩。 2. 设置 show-checkbox 属性为 true，这样可以在节点前面显示复选框。 3. 监听 el-tree 的 node-click 事件，在事件处理函数中判断当前点击的节点是否为第三级及以下节点，如果是则禁止展开/收缩，否则允许展开/收缩。例如： ``` <template> <el-tree :data="data" :expand-on-click-node="true" :show-checkbox="true" @node-click="handleNodeClick"> </el-tree> </template> <script> export default { data() { return { data: [ { label: '一级 1', children: [ { label: '二级 1-1', children: [ { label: '三级 1-1-1' }, { label: '三级 1-1-2' } ] }, { label: '二级 1-2', children: [ { label: '三级 1-2-1' }, { label: '三级 1-2-2' } ] } ] } ] }; }, methods: { handleNodeClick(node) { if (node.level >= 2) { return false; // 禁止展开/收缩第三级及以下节点 } } } }; </script> ``` 这样做可以实现 el-tree 只能展开两级的效果。