1.开发时对部分前端框架组件功能的认知不清楚：
2.select和tree的结合体:
基本使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| /**
0.支持双向绑定和ngModelChange。
1.nzExpandedKeys：展开的节点keys
2.nzShowSearch：是否显示模糊搜索，默认false
3.nzAllowClear：是否支持clear，默认true
4.nzMultiple：是否支持多选
*/
<nz-tree-select
style="width: 250px"
[nzExpandedKeys]="expandKeys"
[nzNodes]="basicNodes"
nzShowSearch
nzPlaceHolder="请输入"
[(ngModel)]="value"
(ngModelChange)="onChange($event)"
[nzAllowClear]="false"
[nzMultiple]="true"
>
|
超过N个…显示
1
2
3
4
5
6
7
8
9
| [nzMaxTagCount]="2"
[nzMaxTagPlaceholder]="omittedPlaceHolder"
<ng-template #omittedPlaceHolder let-omittedValues>
还有 {{ omittedValues.length }} 条...
</ng-template>
// omittedPlaceHolder是模板。
|
checkbox功能
1
2
3
4
5
6
7
8
9
10
11
12
| <nz-tree-select
style="width: 250px"
[(ngModel)]="checkboxValue"
[nzNodes]="checkboxNodes"
(ngModelChange)="onCheckboxChange($event)"
nzShowSearch
nzCheckable
nzPlaceHolder="Please select"
[nzDisplayWith]="display"
>
</nz-tree-select>
|
👌nzCheckable就是加上了checkbox，且支持多选。
😊[nzDisplayWith]="display"改变显示字段。
1
2
3
4
| display = (node) => {
console.log(node);
return node.key;
}
|
👍[nzDisplayWith] ：如何在输入框显示所选的节点值的方法 ，默认(node: NzTreeNode) => node.title
1
2
3
4
| display = (node) => {
console.log(node);
return node.origin.value;
}
|