Ant-tree 自定义父子节点图标(一)

// 注意事项: <a-tree/>标签里面必须包含你要替换的图标 或者SVG,
//       并且changeTreeData()方法中,
//       给每一个Item添加slots属性的时候 icon值必须要与<a-tree/>标签里面的图片或者图标的slot属性值一致
<template>
  <div>
    <a-tree
      showIcon
      :treeData="treeData"
    >
      <a-icon slot="zero" type="dropbox" />
      <a-icon slot="one" type="chrome" />
    </a-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      treeData:[],
    };
  },
  methods: {
    // 模拟向发后台请求
    loadData(){
      // changeTreeDataModel  只是我瞎写的一个请求后台API的一个方法
      changeTreeDataModel().then(res=>{
        // res.List是后台返回的数据
        // 这只是简单的修改父节点图标和子节点图标不一致
        // 如果项目需要根据特定的status来显示不同的图标 我博客也有写 
        this.treeData = this.changeTreeData(res.List)
      })
    },
    // 遍历并且改变后台传回来的data值
    changeTreeData(data) {
      let that = this;
      for (let item of data) { 
        // 这里不一定要用for..of(循环速度快一点),还可以用forEach((item)=>{})  filter等等(解决this指向的问题)
        if (item.parentId=='0' || item.children.length !== 0) {
          // parentId  判断是否有父节点的字段,有的话就用子节点图标,没有的话就用父节点图标
          // item.parentId=='0'  我的后台返回所有的一级菜单parentId为'0', 有的可能会返回null 只要item.parentId==null就可以(以此类推)
          // 根据后台返回值进行判断 (children返回null 判断就改 item.children!==null)(以此类推)
          that.changeTreeData(item.children);
          // 根据项目需求设置(使用 treeNodes 配置支持 slots, 使用 columns 时，配置支持 scopedSlots )
          // 按自己项目需求设置使用配置属性( slots || scopedSlots )
          item.slots = { icon: "zero" };
        } else {
          item.slots = { icon: "one" };
        }
      }
      return data;
    },
  },
};
</script>