tree下拉树如何获取选中状态

更新时间:02-10 教程 由 思君 分享

tree下拉树如何获取选中状态?

重新回到设置 check-strictly 为 true 时,父子级不互相关联,挨个点击用户体验不好的问题,同时也避免了出现半选的情况。

我们简化用户的操作:

1、当点击勾选复选框时候,若状态为 选中

1.1、其所有 父节点 (父节点、父节点的父节点以此类推)全部统一跟随当前节点变化为 选中 。

1.2、其下 子节点 全部统一跟随父节点变化为 选中 。2、当点击勾选复选框时候,若状态为 未选中 ,其下 子节点 全部统一跟随父节点变化为 未选中 。

一、el-tree 标签属性

node-key:每个树节点用来作为唯一标识的属性,整棵树应该是唯一的。标识节点唯一的键值名称。

default-checked-keys:对应el-tree多选树组件初始化时默认选中ID

check-strictly:是否严格的遵循父子不互相关联的做法,默认为false

check:当复选框被点击的时候触发的方法

二、点击复选框处理

点击事件时,若选中节点,则父节点和子节点都设为勾选状态,若取消节点选中,则取消该节点下的所有节点。

clickDeal (currentObj, treeStatus) { // 用于:父子节点严格互不关联时,父节点勾选变化时通知子节点同步变化,实现单向关联。 let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中 // 选中 if (selected !== -1) { // 子节点只要被选中父节点就被选中 this.selectedParent(currentObj) // 统一处理子节点为相同的勾选状态 this.uniteChildSame(currentObj, true) } else { // 未选中 处理子节点全部未选中 if (currentObj.childs.length !== 0) { this.uniteChildSame(currentObj, false) } }},

三、处理选中父节点和子节点

通过 setChecked 设置节点是否选中状态。

check 事件可以传递给 data 属性的数组中该节点所对应的对象,将data 中及其下所有字节,统一处理子节点为相同的勾选状态

uniteChildSame (treeList, isSelected) { this.$refs.trees.setChecked(treeList.id, isSelected) if (treeList.children) { for (let i = 0; i < treeList.children.length; i++) { this.uniteChildSame(treeList.children[i], isSelected) } } },

怎么获取选中节点的父节点呢?

首先我们先介绍 getnode,根据 data 或者 key 拿到 Tree 组件中的 node,那么我们可以通过点击节点获取到当前节点信息。

使用 currentNode.parent.key 判断父节点是否选中,如果没选中,则设置父节点选中,同时递归查询父节点的父节点选中情况。

// 统一处理父节点为选中selectedParent (currentObj) { let currentNode = this.$refs.tree.getNode(currentObj) if (currentNode.parent.key !== undefined) { this.$refs.trees.setChecked(currentNode.parent, true) this.selectedParent(currentNode.parent) }},

声明:关于《tree下拉树如何获取选中状态》以上内容仅供参考,若您的权利被侵害,请联系13825271@qq.com
本文网址:http://www.25820.com/tutorial/14_2201091.html