antd-tree-select

与select和tree的结合体。

基本使用

/**
  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个…显示

[nzMaxTagCount]="2"
[nzMaxTagPlaceholder]="omittedPlaceHolder"


<ng-template #omittedPlaceHolder let-omittedValues>
  还有 {{ omittedValues.length }} 条...
</ng-template>

// omittedPlaceHolder是模板。

checkbox功能

<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"改变显示字段。

display = (node) => {
  console.log(node);
  return node.key; // 默认显示的是title；改成value不行；修改为下面的写法。
}

[nzDisplayWith] ：如何在输入框显示所选的节点值的方法 ，默认(node: NzTreeNode) => node.title

display = (node) => {
  console.log(node);
  return node.origin.value;
}

注：nzDisplayWith改变的是选中后input框中显示的值，增加上origin即可。