ant design vue tree控件自定义图标并动态变化

效果

展开文件夹时

代码

        <a-tree
          :treeData="treeData"
          :default-selected-keys="defaultValue"
          show-icon
          :style="{
            'min-height': '500px',
            height: '700px',
            'border-right': '2px solid #c1c1c1',
            'overflow-y': 'auto',
          }"
          @select="onSelect"
          @expand="onExpand"
        >
          <img src="./img/folder.svg" slot="folder" style="margin-right: 5px;" width="20px" />
          <img src="./img/openFolder.svg" slot="openFolder" style="margin-right: 5px;" width="20px" />
        </a-tree>

/* 前端给treedata赋slots值
 * 使用递归处理
 * 传入的参数:treedata
 */
setIcon(datas) {
      var that = this
      for (var i = 0; i < datas.length; i++) {
        datas[i].slots = { icon: 'folder' }
        if (datas[i].children.length > 0) {
          that.setIcon(datas[i].children)
        }
      }
    },
 /* 点击展开有子节点的节点时 改变图标
  * 通过改变其slots的值来改变图标
  */
onExpand(expandedKeys, event) {
      if (event.expanded) {
        event.node.dataRef.slots.icon = 'openFolder'
      } else {
        event.node.dataRef.slots.icon = 'folder'
      }
 },

如果需要改变目录节点的图标

<a-tree
          :treeData="treeData"
          :default-selected-keys="defaultValue"
          show-icon
          :style="{
            'min-height': '500px',
            height: '700px',
            'border-right': '2px solid #c1c1c1',
            'overflow-y': 'auto',
          }"
          @select="onSelect"
          @expand="onExpand"
        >
        //start  目录节点的图标  务必 slot值为 switcherIcon
          <a-icon slot="switcherIcon" type="down" />
        // end
          <img src="./img/folder.svg" slot="folder" style="margin-right: 5px;" width="20px" />
          <img src="./img/openFolder.svg" slot="openFolder" style="margin-right: 5px;" width="20px" />
        </a-tree>

---

---

如果有用,请给小弟一个赞的支持!谢谢