Nz-tree 树结构取消父子之间强关联关系后，选中父级，子级仍然选中，但取消子级后父级不会取消选中

完整代码如下：

import { Component } from '@angular/core';import { NzFormatEmitEvent } from 'ng-zorro-antd/tree';
import { NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';@Component({selector: 'nz-demo-tree-basic-controlled',template: `<nz-tree#nzTreeSelected[nzData]="nodes"nzShowLinenzCheckablenzMultiple[nzCheckedKeys]="checkedKeys"(nzCheckBoxChange)="nzSelectedClick($event)"[nzExpandAll]="true"[nzCheckStrictly]="true">`,
})
export class NzDemoTreeBasicControlledComponent {checkedKeys = [];nodes = [{title: '0-0',key: '0-0',expanded: true,children: [{title: '0-0-1',key: '0-0-1',children: [{ title: '0-0-1-0', key: '0-0-1-0', isLeaf: true },{ title: '0-0-1-1', key: '0-0-1-1', isLeaf: true },{ title: '0-0-1-2', key: '0-0-1-2', isLeaf: true },],},{title: '0-0-2',key: '0-0-2',},],},{title: '0-1',key: '0-1',children: [{ title: '0-1-0-0', key: '0-1-0-0', isLeaf: true },{ title: '0-1-0-1', key: '0-1-0-1', isLeaf: true },{ title: '0-1-0-2', key: '0-1-0-2', isLeaf: true },],},];nzSelectedClick(event: NzFormatEmitEvent) {console.log(111);// 如果是选中状态则向已选中列表添加数据 并重置已选中列表数据if (event.node.isChecked) {this.checkedKeys.push(event.node.key);this.checkedKeys = [...this.checkedKeys];if (event.node.parentNode) {// 如果有父节点 则判断父节点是否已选中this.checkedParents(event.node.parentNode);}// 如果有子节点 则选中所有子节点if (event.node.children) {this.checkedChildrenKeys(event.node.children);}} else {// 反之为取消选中时清除已选中列表中的此节点key 并重置已选中列表数据this.cancelCheckedNode(event.node.key);// 如果不是叶子结点则取消其所有子节点的选中状态setTimeout(() => {if (event.node.children) {this.cancelCheckedChildrenKeys(event.node.children);}}, 10);// 如果不是按钮节点 则判断同级节点选中状态//const node: NzTreeNodeS = event.node;//if (event.node.origin.type !== 'button' && event.node.parentNode) {// this.sameLevelChecked(event.node.parentNode);// }}}checkedParents(node: any) {if (!node.isChecked) {this.checkedKeys.push(node.key);this.checkedKeys = [...this.checkedKeys];}if (node.parentNode && !node.parentNode.isChecked) {this.checkedParents(node.parentNode);}}checkedChildrenKeys(node: any) {if (node) {node.forEach((val: any) => {this.checkNodeKey(val.key);if (val.children) {this.checkedChildrenKeys(val.children);}});}}checkNodeKey(key: string) {this.checkedKeys.push(key);this.checkedKeys = [...this.checkedKeys];}cancelCheckedChildrenKeys(node: any) {node.forEach((val: any) => {if (val.isChecked) {this.cancelCheckedNode(val.key);}if (val.children.length > 0) {this.cancelCheckedChildrenKeys(val.children);}});}sameLevelChecked(node: any) {let checked: boolean = false;node.children.forEach((val: any) => {if (val.isChecked) {checked = true;return;}});if (!checked) {this.cancelCheckedNode(node.key);if (node.parentNode) {setTimeout(() => {this.sameLevelChecked(node.parentNode);}, 10);}}}// 取消节点选中并重置已选中节点列表cancelCheckedNode(key: string) {this.checkedKeys.splice(this.checkedKeys.findIndex((item) => item === key),1);this.checkedKeys = [...this.checkedKeys];}
}

参考部分代码：

https://blog.csdn.net/chong_po/article/details/121489095

Nz-tree 树结构取消父子之间强关联关系后，选中父级，子级仍然选中，但取消子级后父级不会取消选中相关推荐

Java类之间的关联关系
Java类之间的关联关系 UML类图中的关系分为四种:泛化.依赖.关联.实现:关联关系又可以细化为聚合和组合. 一.泛化(Generalization) 泛化是父类和子类之间的关系,子类继承父类的所有 ...
SAP WM 通过2-Step Picking创建的TO之间的关联关系
SAP WM 通过2-Step Picking创建的TO之间的关联关系 SAP WM模块里的2-Step Picking功能,会在Pick环节和Allocation环节创建TO单据来完成拣配事务.这些 ...
java递归获取树结构的指定层级、指定层级之上（向上递归（包含父集所有、爷爷集所有...）（父集单独、爷爷集单独...））、指定层级之下所有的（子集、孙子集...）和list集合转Tree树结构
实体类 package com.ruoyi.system.test;import lombok.Data;import java.util.ArrayList; import java.util.Li ...
python面向对象OOP编程（三）-- 同类不同实例之间的关联关系
当一个类有多个实例,但是在实例之间有着相互的关联关系,此时,不建议在实例中新增一个成员属性来描述这种关联关系据一个实际场景来帮助理解:People类有两个实例:AA和BB,AA是男的,BB 是女的, ...
Vue中父子之间的通信
在学习vue中,往往会碰到父子组件之间的通信问题,用一张图来简单解释下父子之间如何通信由图可以知道父组件传递参数给子组件子组件通过props接收参数父子通信代码演示: <!DOCTYP ...
uni-app H5使用web-view父子之间的相互传值
uni-app H5使用web-view父子之间的相互传值遇到的问题: uni-app页面代码 web-view(HTML页面),子组件接收父组件数据,子组件传值给父组件遇到的问题: uni-ap ...
这个数据集同时记录了血糖值和PPG 数据，试图用CNN找到他们之间的关联关系，尝试基于PPG的无创连续检测血糖！
本文作者联系方式:392625227@qq.com This data set records the blood glucose and PPG data at the same time, try ...
Python的富比较方法__eq__和__ne__之间的关联关系分析
Python的富比较方法包括__lt__.__gt__.__le__.__ge__.__eq__和__ne__六个方法,分别表示:小于.大于.小于等于.大于等于.等于和不等于,对应的操作运算符为:&l ...
Java将List列表转换为Tree树结构的方法
本文介绍如何从数据库中读取List列表数据并将其转换为Tree树结构数据.从而可以完整展现其中的层级关系. 1.表结构本次以商品分类为例,表结构设计支持多级商品分类,理论上可以无限向下创建下级分类. ...

Nz-tree 树结构取消父子之间强关联关系后，选中父级，子级仍然选中，但取消子级后父级不会取消选中

Nz-tree 树结构取消父子之间强关联关系后，选中父级，子级仍然选中，但取消子级后父级不会取消选中相关推荐

最新文章

热门文章