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

最新推荐文章于 2024-02-04 14:21:41 发布
最新推荐文章于 2024-02-04 14:21:41 发布
阅读量2.8k 收藏 7
点赞数
分类专栏： vue js element 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anny_mei/article/details/117816755
版权
vue 同时被 3 个专栏收录
56 篇文章 0 订阅
订阅专栏
element
33 篇文章 0 订阅
订阅专栏
js
27 篇文章 0 订阅
订阅专栏 
  handleNodeClick (node, e) {
      console.log(node, '点击了节点')
      if (e.parent.node.label !== undefined) {
        this.dialogView = true
      }
      // 或者只能点击最后一级
       if (!node.childNodes.length == 0) {
        // 除了最后一及其它节点disabled都为true,不可点击
        node.disabled = true;
      }
    },

在这里插入图片描述

神探小白牙
关注
专栏目录
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
在Element-ui中，`el-tree`是一个非常常用的组件，用于展示层级关系的数据。在实际开发过程中，我们常常需要动态地新增或删除树形结构中的节点，并确保这些操作后树能够正确地更新显示。本文将详细讲解如何在Element...
el-tree只能点击最后⼀级
TodayStartWJH的博客
10-17 2489
el-tree只能点击最后⼀级
vue3.2 element-plus el-tree仅点击子级最后一级高亮，父级不高亮
nlhhln的博客
06-12 1356
vue3.2 element-plus el-tree仅点击子级最后一级高亮，父级不高亮
element UI 树形数据只能选择最后一级 只能单选 树形单选树形检索
Taurus_666
06-23 6454
直接上代码，如有疑问，欢迎交流 template里面 <el-tree class="filter-tree" :data="assetBigClassTreeData"// 树形data数据，具体按照官方文档格式 :props="defaultProps" //自定义props配置，如严格按照官方格式无需添加此项， @check="checkChange" //checkbox 选项变化事件 node-key="id" //勾选时按照哪个值显示，必须是唯一的值 accordion c
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
yinzisang的博客
12-30 7555
设置el-tree层级线，并且只能选中无子节点的叶节点
el-tree只有最后一级可以选中
Nefertar的博客
12-02 4602
el-tree最后一级可以选择，其他禁用并把复选框隐藏
VUE element-ui之el-tree树形控件获取最后一级节点（无子节点的节点）
HanXiaoXi_yeal的博客
08-22 5388
VUE element-ui之el-tree树形控件获取最后一级节点（无子节点的节点）
el-tree实现多选、父子节点不关联、禁选
weixin_58347102的博客
09-01 2232
4、将勾选的节点，按父子层级拼接name回显页面（如勾选了二级，需将一级name拿到并拼接起来：一级/二级）5、回显页面的name可删除，删除的同时需同步更新菜单树勾选状态，禁选状态。3、最多可勾选3条，大于3其余复选框禁选。2、父子节点不关联，互不影响。
单选el-tree组件,只可选最后一个层级
weixin_44899044的博客
05-30 3015
/ 输出父节点数组。label: '子节点1-1-1'label: '子节点1-1-2'label: '子节点1-1',parentMap: {} // 父节点映射关系。label: '子节点1-2'// 获取当前选中子节点的所有父节点。label: '节点1',label: '节点2'// 只选中最后一个层级节点。// 展开点击的节点。
使用el-table的树状结构数据的勾选列，可以勾选第一层级，但是第二级之后的都不支持勾选
qq_42192641的博客
10-10 1472
首先我们处理题目需求：（1）勾选所有子节点后自动勾选父节点（2）勾选父节点会自动勾选所有子节点。
ElementUI中el-tree节点的操作的实现
10-15
在`el-tree`中，我们可以监听节点点击事件，然后打开一个对话框，预填充当前节点的信息供用户修改。在对话框中，通过`v-model`双向绑定数据，使得用户在输入框中的修改实时反映到数据对象中。当用户确认修改后，找到...
el-tree-selected-tree
11-15
在实现`el-tree-selected-tree`时，我们需要监听`el-tree`的`'check-change'`事件，这个事件在节点被选中或取消选中时触发，我们可以获取到当前选中状态和节点信息。通过维护一个`selectedNodes`数组，我们可以记录...
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
"el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件"是一个自定义的前端UI组件，它结合了Element UI库中的el-select和el-tree两个组件的功能，创建了一个适用于数据层级关系展示的选择器。...
el-tree 只显示最后一级节点的复选框
ZJWZJWBUWEN的博客
08-11 3687
转自博客园 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
vue2 el-table新增行内删除行内（两种写法）里面第一个是树组件，第二个是数字组件，第一个数组件只能勾选最后一个节点
最新发布
weixin_60906876的博客
02-04 747
拿到数据传递给子去，然后进项本地储存 ，监听。inputNumber.vue文件。
el-cascader实现多选最后一级并回显
u010687388的博客
06-13 4897
vue3+elementplus下，el-cascader多选及回显
【Element】el-tree 只需要选中最末级节点(回显数据)
IU
11-29 3044
筛选出没有下一级的节点 （核心代码如下） console.log(SelectedObj.checkedNodes) // 这是选中的节点数组 this.chosedData.departmentList = SelectedObj.checkedNodes.filter(item => { return item.childList.length === 0 }) ...
element ui 层级选择器el-cascader只能选最后一级多选
weixin_41434788的博客
03-09 6110
使用css达到让el-cascader只能选最后一级多选
el-tree如何实现触发指定节点的点击事件
05-27
在 ElementUI 中，el-tree 组件的节点点击事件可以通过以下两种方式实现： 1. 通过在 el-tree 上绑定 @node-click 事件，在事件处理函数中获取点击的节点信息，然后根据需要执行相应的操作。示例代码如下： ```html <template> <el-tree :data="data" @node-click="handleNodeClick"></el-tree> </template> <script> export default { data() { return { data: [ { label: 'Node 1', children: [ { label: 'Node 1-1' }, { label: 'Node 1-2' } ] }, { label: 'Node 2' } ] } }, methods: { handleNodeClick(data) { console.log(data) // 执行相应的操作 } } } </script> ``` 2. 通过在 el-tree 的节点上绑定 node-key 属性，并在 el-tree 上绑定 ref，在需要触发点击事件的地方通过 this.\$refs.tree.getNode(key) 获取对应节点实例，然后调用节点实例的 doClick 方法触发点击事件。示例代码如下： ```html <template> <el-tree :data="data" ref="tree"></el-tree> </template> <script> export default { data() { return { data: [ { label: 'Node 1', id: 1, children: [ { label: 'Node 1-1', id: 2 }, { label: 'Node 1-2', id: 3 } ] }, { label: 'Node 2', id: 4 } ] } }, methods: { triggerNodeClick(key) { const node = this.$refs.tree.getNode(key) node.doClick() } } } </script> ``` 其中，key 为节点的唯一标识符，可以通过在节点数据中设置 id 属性来指定。需要注意的是，这种方式只能触发节点的点击事件，无法获取点击的节点信息。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值