需求：

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

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);}