树形控件中的svg图标的使用

初始样式:

完成之后的样式:

我们需要解决的有以下几点:

先给没有下属节点的对象加上图标
如何消除默认的展开收起图标(小三角)
有下属节点的通过是否展开,来修改加号和减号

难点一: 如何给没有下属节点的对象加一个头像

<svg-icon v-if="data.children.length !== 0"  icon-class= 'add' /><svg-icon v-else icon-class="user1" /><span>{{ data.name }}</span>

判断它是否有children 如果有则隐藏,如果没有则则显示 icon-class="user1" 这个图标,此svg图标可自己更改

难点二:如何消除组件默认的展开图标

这是时候是可以正常显示,但有一个小bug 就是组件默认图标还是会有

我使用的方法是直接在组件上定义空的图标 (记得修改为带空格的字符串)

<el-treedefault-expand-all:data="data"icon-class=" "  // 消除默认的展开图标>

难点三:判断是否展开来显示不同的展开收起图标

这一点需要去element-ui里面查阅文档来解决,如果不看文档,根本就看不到,所以注意:以后使用第三方的库或者插件,一定要好好阅读文档

          <template #default="{ data,node }"><el-rowtype="flex"justify="space-between"align="middle"style="height: 40px; width: 100%">

模板里面的 #default 并不只是接受一个参数data ,他可以接受三个参数分别是 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身

这个时候我们就可以用 node这个对象中的各种属性,其中就包括 expanded 这个属性就是当前节点是否展开和关闭代码如下:

 <el-col :span="20"><svg-iconv-if="data.children.length !== 0":icon-class="node.expanded ? 'minus' : 'add'"/><svg-icon v-else icon-class="user1" /><span>{{ data.name }}</span></el-col>

如果当前节点有 children 则根据node.expanded 来判断显示加号还是减号 'minus' : 'add',svg图标可自行更改

树形控件中的svg图标的使用相关推荐

treeview控件怎么使用修改发育树_树形控件在生产力工具中的设计
惊!半年实践血泪史,3000 字深度好文,一个爱树的设计师手把手教你如何设计「树」! 树形控件是种常见的设计模式,几乎与图形化用户界面同时诞生,通过结构化的组织方式逐级展示内容,让整体信息架构一目了 ...
element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...
在element-ui的el-tree树形控件中默认获取选取当前选中id的方法是this.$refs.tree.getCheckedKeys(); 但是如果子节点不是全部选中的话,父节点算不选中. 由 ...
autojs遍历当前页面所有控件_树形控件在生产力工具中的设计
惊!半年实践血泪史,3000 字深度好文,一个爱树的设计师手把手教你如何设计「树」! 树形控件是种常见的设计模式,几乎与图形化用户界面同时诞生,通过结构化的组织方式逐级展示内容,让整体信息架构一目了 ...
树形控件CTreeCtrl的使用详解（一）
树型视的三个结构TVINSERTSTRUCT.TVITEM.NMTREEVIEW TVINSERTSTRUCT 包含添加新项到树形视控件所使用的信息.这个结构被TVM_INSERTITEM消息使用.这 ...
VS2010/MFC编程入门之三十（常用控件：树形控件Tree Control 上）
前面两节为大家讲了列表视图控件List Control,这一节开始介绍一种特殊的列表--树形控件Tree Control. 树形控件简介树形控件在Windows系统中是很常见的,例如资源管理器左侧的 ...
树形控件Tree Control
树形控件Tree Control 前面两节为大家讲了列表视图控件List Control,这一节开始介绍一种特殊的列表--树形控件Tree Control. 树形控件简介树形控件在Windows系统 ...
《实用VC编程之玩转控件》第15课：Tree树形控件
本文转载自:VC驿站 https://www.cctry.com/thread-297465-1-1.html 1.控件简介: Tree树形控件也是我们编程过程中比较常用的一个控件,而且在其他软件中也 ...
VS2019/MFC编程入门：树形控件Tree Control 下
前面一节讲了树形控件Tree Control的简介.通知消息以及相关数据结构,本节继续讲下半部分,包括树形控件的创建.CTreeCtrl类的主要成员函数和应用实例.在内容开始前为大家介绍一款MFC界面 ...
Qt QTreeWidget树形控件用法详解
文章目录 QTreeWidget控件的创建 QTreeWidget\QTreeView的关系和区别 QTreeWidgetItem类 QTreeWidget的实际应用 1) 添加结点 2) 给结点添加 ...

树形控件中的svg图标的使用

我们需要解决的有以下几点:

难点一: 如何给没有下属节点的对象加一个头像

难点二:如何消除组件默认的展开图标

难点三:判断是否展开来显示不同的展开收起图标

树形控件中的svg图标的使用相关推荐

最新文章

热门文章

树形控件中的svg图标的使用

我们需要解决的有以下几点:

难点一: 如何给没有下属节点的对象加一个头像

难点二:如何消除组件默认的展开图标

难点三:判断是否展开 来显示不同的展开收起图标

树形控件中的svg图标的使用相关推荐

最新文章

热门文章

难点三:判断是否展开来显示不同的展开收起图标