接着上篇文章：这篇实现 根据后端动态返回数据的渲染tree下拉组件（只提供这部分重要代码参考，完整请在github拉取）

vue实现 Element-UI 的 Tree Select 树形选择器组件（一）组件封装

github下载地址：https://github.com/xiechunhao/vue-treeSelect

1. 先准备一个后端返回的模拟JSON文件，命名为 tree.json

{
    "msg": "成功",
    "status": "1",
    "data": [{
            "id": 1,
            "parentId": "0",
            "level": 1,
            "goodsTypeName": "水果类",
            "children": [{

                    "id": 2,
                    "parentId": "1",
                    "level": 1,
                    "goodsTypeName": "苹果01",
                    "children": []
                },
                {

                    "id": 3,
                    "parentId": "1",
                    "level": null,
                    "goodsTypeName": "橘子01",
                    "children": [{

                        "id": 4,
                        "parentId": "3",
                        "level": 1,
                        "goodsTypeName": "大橘子",
                        "children": []
                    }]
                }
            ]
        },
        {
            "id": 5,
            "parentId": "0",
            "level": 1,
            "goodsTypeName": "蔬菜类",
            "children": []
        }
    ]
}

2. 递归遍历JSON文件，getNodeTree()方法

<script>
import treeJson from './api/tree.json';
export default {
  data() {
    return {
      list: [],
    };
  },
  created(){
    this.getNodeTree(treeJson);
    let obj = {}
    this.list = this.list.reduce((item, next) => {
      obj[next.id] ? '' : obj[next.id] = true && item.push(next)
      return item
    }, [])
  },
  methods: {
    getNodeTree(tree){
      for(var i in tree){
        if(typeof tree[i] == 'object'){
          this.getNodeTree(tree[i])
        }else{
          this.list.push(
            {
              "id":tree["id"],
              "parentId":tree["parentId"],
              "name":tree["goodsTypeName"]
            }
          )
        }
      }
    },
  }
};
</script>