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

// 注意事项: 采用 A-tree icon方法(自定义图标。可接收组件，props 为当前节点props)
<template>
  <div>
    <a-tree showIcon :treeData="treeData" :icon="getIcon" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      treeData:[],
    };
  },
  methods: {
    // 自定义父节点图标
        getIcon(props) {
      // >>>>>>>>>>>关键在于判断是否有无父节点和子节点
      // 1. 后台返回值有children 和 parentId字段
      // 2. children 判断当前节点是否子节点如果有的话显示父节点,
      //        么有显示子节点(根据后台返回值进行判断 (children返回null 判断就改 children!==null)(以此类推))
      // 3. parentId  判断是否有父节点的字段,有的话就用子节点图标,没有的话就用父节点图标
      //        parentId=='0'  我的后台返回所有的一级菜单parentId为'0', 有的可能会返回null 只要parentId==null就可以(以此类推)
            const { children, parentId } = props
            if (parentId == '0' || children.length > 0) {
                return <a-icon type="tags" theme="twoTone" />
            } else {
                return <a-icon type="tag" theme="twoTone" />
            }
        },
    },
  },
</script>