当前位置: 首页 > article >正文

树型名称前面插入图片

需求:

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

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


http://www.kler.cn/a/348947.html

相关文章:

  • Python学习之旅
  • 【NTN 卫星通信】卫星通信的专利
  • YOLOv11改进策略【卷积层】| GnConv:一种通过门控卷积和递归设计来实现高效、可扩展、平移等变的高阶空间交互操作
  • 安装Node.js环境,安装vue工具
  • 宠物咖啡馆平台架构:SpringBoot技术的核心作用
  • neo4j知识图谱管理系统,结合es全文检索,知识管理系统
  • 10月15日,每日信息差
  • Electron-(一)创建桌面应用
  • 如何捕捉行情爆发的前兆
  • AOT漫谈专题(第一篇): 如何调试C# AOT程序
  • 设计循环双端队列
  • C++11 新特性 学习笔记
  • 计算机毕业设计 基于Python的美术馆预约系统的设计与实现 Python毕业设计 Python毕业设计选题【附源码+安装调试】
  • .gitattributes文件的相关介绍
  • 【秋招笔试】10.09华子秋招(已改编)-三语言题解
  • 【MySQL】CRUD增删改查操作
  • 使用 systemd 设置 PHP 程序为服务
  • 东方通 TongWebV7 Docker 部署与 Spring Boot 集成指南
  • OpenGL 自定义SurfaceView Texture C++预览Camera视频
  • windows C++-避免死锁(下)