tree-select 树选择

树型选择控件。

注意：

• tree-select 的数据源必须包含 title、key 键名

代码演示

基础样例

最简单的用法。

多选：重置时无法刷新默认值 #2085

import { Component } from '@angular/core';
import { SFSchema, SFTreeSelectWidgetSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';
@Component({
  selector: 'form-tree-select-simple',
  template: `
    <sf [schema]="schema" (formSubmit)="submit($event)"></sf>
  `,
})
export class FormTreeSelectSimpleComponent {
  schema: SFSchema = {
    properties: {
      status1: {
        type: 'string',
        title: '基本',
        enum: [
          { title: '待支付', key: 'WAIT_BUYER_PAY' },
          { title: '已支付', key: 'TRADE_SUCCESS' },
          { title: '交易完成', key: 'TRADE_FINISHED' },
        ],
        default: 'WAIT_BUYER_PAY',
        ui: {
          widget: 'tree-select',
        } as SFTreeSelectWidgetSchema,
      },
      status2: {
        type: 'string',
        title: '多选',
        enum: [
          { title: '待支付', key: 'WAIT_BUYER_PAY' },
          { title: '已支付', key: 'TRADE_SUCCESS' },
          { title: '交易完成', key: 'TRADE_FINISHED' },
        ],
        default: ['WAIT_BUYER_PAY', 'TRADE_SUCCESS'],
        ui: {
          widget: 'tree-select',
          multiple: true,
        } as SFTreeSelectWidgetSchema,
      },
      status3: {
        type: 'string',
        title: '可勾选',
        default: ['WAIT_BUYER_PAY', 'TRADE_FINISHED'],
        ui: {
          widget: 'tree-select',
          checkable: true,
          asyncData: () =>
            of([
              { title: '待支付', key: 'WAIT_BUYER_PAY' },
              { title: '已支付', key: 'TRADE_SUCCESS' },
              { title: '交易完成', key: 'TRADE_FINISHED' },
            ]).pipe(delay(10)),
        } as SFTreeSelectWidgetSchema,
      },
      // 异步数据
      async: {
        type: 'string',
        title: 'Async',
        enum: [
          { title: '待支付', key: 'WAIT_BUYER_PAY' },
          { title: '已支付', key: 'TRADE_SUCCESS' },
          { title: '交易完成', key: 'TRADE_FINISHED' },
        ],
        ui: {
          widget: 'tree-select',
          expandChange: () => {
            return of([
              { title: '待支付', key: 'WAIT_BUYER_PAY' },
              { title: '已支付', key: 'TRADE_SUCCESS' },
              { title: '交易完成', key: 'TRADE_FINISHED' },
            ]).pipe(delay(10));
          },
        } as SFTreeSelectWidgetSchema,
      },
    },
  };
  constructor(public msg: NzMessageService) {}
  submit(value: any) {
    this.msg.success(JSON.stringify(value));
  }
}

自定义图标

可以针对不同节点采用样式覆盖的方式定制图标。

import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { SFSchema, SFTreeSelectWidgetSchema } from '@delon/form';
import { NzTreeNode } from 'ng-zorro-antd/tree';
@Component({
  selector: 'form-tree-select-customized-icon',
  template: `
    <sf *ngIf="schema" [schema]="schema"></sf>
    <ng-template #customTpl let-node>
      <span class="ant-tree-node-content-wrapper" [class.ant-tree-node-selected]="node.isSelected">
        <span> <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'"></i> {{ node.title }} </span>
      </span>
    </ng-template>
  `,
})
export class FormTreeSelectCustomizedIconComponent implements OnInit {
  @ViewChild('customTpl', { static: true }) private customTpl!: TemplateRef<{ $implicit: NzTreeNode }>;
  schema: SFSchema;
  ngOnInit(): void {
    this.schema = {
      properties: {
        status: {
          type: 'string',
          title: '基本',
          enum: [
            {
              title: 'parent 1',
              key: '100',
              expanded: true,
              icon: 'smile',
              children: [
                { title: 'leaf 1-0-0', key: '10010', icon: 'meh', isLeaf: true },
                { title: 'leaf 1-0-1', key: '10011', icon: 'frown', isLeaf: true },
              ],
            },
          ],
          default: '10010',
          ui: {
            widget: 'tree-select',
            treeTemplate: this.customTpl,
          } as SFTreeSelectWidgetSchema,
        },
      },
    };
  }
}

API

schema 属性

ui 属性

异步数据务必先指定初始化数据（使用 enum、asyncData 选其一），否则无法触发 expandChange。