完整代码如下:
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"
nzShowLine
nzCheckable
nzMultiple
[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];
}
}
参考部分代码: