关于在vue项目中给a-tree自定义图标

想要自定义图标，其实很简单，用好自定义slot即可，话不多说，看代码

<a-tree
          style="overflow: scroll"
          show-line
          blockNode
          show-icon
          :replaceFields="{
            children: 'children',
            title: 'label',
            key: 'code',
          }"
          expandAction="click"
          :treeData="MBtreeData"
          @rightClick="dialogFormVisible = true"
          @select="change"
        >
          <span style="color: red; fontsize: 12px" slot="A">部</span>
          <span style="color: red; fontsize: 12px" slot="B">子</span>
          <span style="color: red; fontsize: 12px" slot="C">项</span>
          <span style="color: red; fontsize: 12px" slot="D">检</span>
          <span style="color: red; fontsize: 12px" slot="E">报</span>
          <span style="color: red; fontsize: 12px" slot="F">临</span>
          <span style="color: red; fontsize: 12px" slot="G">其他</span>
        </a-tree>

树结构a-tree中，用什么都可以，span  img标签  icon图标等等没有限制，定义好slot即可

接下来是将自定义的slot递归循环进树结构数组      此处我也不一一分装 实现即可

！！！！给树结构的数据中挨个加入slots属性，是与标签中的slot相对应的

// 设置树结构图标
    setIcon(menus) {
      let that = this;
      for (let value of menus) {
        //   判断是不是父级     // 关键 - 判断是否还有子节点
        if (value.children&& value.children.length > 0) {
          //是父级的话递归调用
          that.setIcon(value.children);
          if (value.ordercode == "A") {
            value.slots = { icon: "A" };
          }
          if (value.ordercode == "B") {
            value.slots = { icon: "B" };
          }
          if (value.ordercode == "C") {
            value.slots = { icon: "C" };
          }
          if (value.ordercode == "D") {
            value.slots = { icon: "" };
          }
          if (value.ordercode == "E") {
            value.slots = { icon: "E" };
          }
          if (value.ordercode == "F") {
            value.slots = { icon: "F" };
          }
          if (value.ordercode == "G") {
            value.slots = { icon: "G" };
          }
        } else {
          if (value.ordercode == "A") {
            value.slots = { icon: "A" };
          }
          if (value.ordercode == "B") {
            value.slots = { icon: "B" };
          }
          if (value.ordercode == "C") {
            value.slots = { icon: "C" };
          }
          if (value.ordercode == "D") {
            value.slots = { icon: "" };
          }
          if (value.ordercode == "E") {
            value.slots = { icon: "E" };
          }
          if (value.ordercode == "F") {
            value.slots = { icon: "F" };
          }
          if (value.ordercode == "G") {
            value.slots = { icon: "G" };
          }
        }
      }
      that.treeData = menus;
    },

都准备好了，然后就是初始化渲染了

// 初始化树结构的渲染
    init() {
      post("ml/queryzlk").then((res) => {
        this.MBtreeData = res;
        this.setIcon(this.MBtreeData);
      });