怎么修改树形控件中的图标

Posted 2021-11-09 DDAD9527

简易效果如图,难点是判断是否展开 来修改加号和减号

 

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

<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-tree :data="list" :default-expand-all="true" icon-class=" ">

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

这是一个坑,难点在于如何获取当前展开节点的信息,我刚开始也找了半天,通过查找组件库里的各种属性,发现这个 #default="{ data }''

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

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

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

 <el-col :span="20">
              <svg-icon
                v-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图标可自行更改

这就是 我对怎么修改树形控件中的图标 的想法和做法,欢迎点赞转发