需求：

搜索树、树型要显示连线，还有名称前带图片

ui组件：https://devui.design/components/zh-cn/overview

直接上代码 

[checkable] ='false' 表示取消复选框

<div class="p-sm">
    <div class="row">
      <d-search style="width: 300px" [placeholder]="'请搜索...'" [isKeyupSearch]="true"                                     (searchFn)="onKeyUp($event)"></d-search>
    </div>
    <d-operable-tree
      #dOperableTreeComponent="dOperableTreeComponent"
      [tree]="treeData"
      [disableMouseEvent]="disableMouseEvent"
      [checkable] ='false'
    >
      <ng-template #iconTemplate let-node="node">
          <img style="width: 16px;height: 16px;" src="{{node?.data?.img}}" alt="">
      </ng-template>
    </d-operable-tree>
</div>

@ViewChild('dOperableTreeComponent', { static: true })
  dOperableTreeComponent!: OperableTreeComponent;
  disableMouseEvent = false;
  treeData = [{
    title: '东源电力电站',
    data: { img: '/assets/images/u53.png' },
    open: true,
    items: [{
      title: '1-1#光伏阵列区',
      data: { img: '/assets/images/u338.png' },
      open: true,
      items: [{
        title: '1-1-1#光伏阵列区',
        data: { img: '/assets/images/u342.png' },
      }, {
        title: '1-1-2#光伏阵列区',
        data: { img: '/assets/images/u342.png' },
      }]
    }, {
      title: '1-2#光伏阵列区',
      data: { img: '/assets/images/u338.png' },
      open: true,
      items: [{
        title: '1-1-1#光伏阵列区',
        data: { img: '/assets/images/u342.png' },
      }, {
        title: '1-1-2#光伏阵列区',
        data: { img: '/assets/images/u342.png' },
      }]
    }],
  }];


  onKeyUp(event: any) {
    this.dOperableTreeComponent.operableTree.treeFactory.searchTree(event);
  }