vue+element动态接参自动生成组织机构树

新出炉的馒头出来喽！！！
vue + element UI开发 测试有效
借用饿了么中的树形控件来实现组织机构树，直接展示效果：

过滤效果，只展示匹配（模糊查询）到的名字及其上级，其余隐藏（不显示）：

代码如下，拿去不谢：

<template>
  <div>
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
    <el-tree class="filter-tree" :data="dataOrgization" :props="defaultProps" default-expand-all  auto-expand-parent :filter-node-method="filterNode" ref="tree"></el-tree>
  </div>
</template>

<script>
  export default {
  //监听事件
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    //
    created(){
      this.getTree()
    },
    methods: {
    //过滤函数 对应  :filter-node-method="filterNode"
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },

      //获取、遍历组织机构树数据
      async getTree(){
        const params = {
          headers:{ 'Authorization': sessionStorage.token}
        }
        // console.log(sessionStorage.token)   //本地获取token，并打印token
        this.$http.get('api接口',params).then(res => {
          //状态码判断
          if(res.data.code === 200){
            this.$message.success(res.data.msg)
            this.dataOrgization = res.data.resource  //将接口传的数据赋值给data[]
          }
        }).catch(err => {
          this.$message.error(err)
        })
      }
    },

    data() {
      return {
        filterText: '',
        dataOrgization:[],    //不可少
         
        defaultProps: {     //必不可少
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

注意：后端返回的数据是json数组的，只是案例样式，原数据已丢失

{
    "code": 200,
    "msg": "查询成功",
    "resource": [{
        "id": 158,
        "label": "XXX集团",
        "org_type": 1,
        "org_level": 1,
        "org_info": null,
        "children": [
            {
                "id": 159,
                "label": "XXXD局",
                "org_type": 2,
                "org_level": 2,
                "org_info": null,
                "children": [
                    {
                        "id": 163,
                        "label": "XXXXDC总部",
                        "org_type": 4,
                        "org_level": 3,
                        "org_info": null,
                        "children": []
                    },
                    {
                        "id": 164,
                        "label": "XXXXXDV项目",
                        "org_type": 5,
                        "org_level": 3,
                        "org_info": null,
                        "children": []
                    },
                    {
                        "id": 165,
                        "label": "XXXXX公司",
                        "org_type": 3,
                        "org_level": 3,
                        "org_info": null,
                        "children": [
                            {
                                "id": 166,
                                "label": "XXXX公司总部",
                                "org_type": 4,
                                "org_level": 4,
                                "org_info": null,
                                "children": [
                                    {
                                        "id": 168,
                                        "label": "行政企划部",
                                        "org_type": 6,
                                        "org_level": 5,
                                        "org_info": null,
                                        "children": []
                                    },
                                    {
                                        "id": 169,
                                        "label": "设备管理部",
                                        "org_type": 6,
                                        "org_level": 5,
                                        "org_info": null,
                                        "children": []
                                    },
                                    {
                                        "id": 170,
                                        "label": "财务管理部",
                                        "org_type": 6,
                                        "org_level": 5,
                                        "org_info": null,
                                        "children": []
                                    }
                                ]
                            },
                            {
                                "id": 167,
                                "label": "XXXX公司项目",
                                "org_type": 5,
                                "org_level": 4,
                                "org_info": null,
                                "children": [
                                    {
                                        "id": 171,
                                        "label": "项目实施部",
                                        "org_type": 6,
                                        "org_level": 5,
                                        "org_info": null,
                                        "children": []
                                    },
                                    {
                                        "id": 172,
                                        "label": "工程管理部",
                                        "org_type": 6,
                                        "org_level": 5,
                                        "org_info": null,
                                        "children": []
                                    },
                                    {
                                        "id": 173,
                                        "label": "会计部",
                                        "org_type": 6,
                                        "org_level": 5,
                                        "org_info": null,
                                        "children": []
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "id": 160,
                "label": "XXXX集团总部",
                "org_type": 4,
                "org_level": 2,
                "org_info": null,
                "children": [
                    {
                        "id": 175,
                        "label": "设计规划部",
                        "org_type": 6,
                        "org_level": 3,
                        "org_info": null,
                        "children": []
                    }
                ]
            },
            {
                "id": 161,
                "label": "XXXXX项目",
                "org_type": 5,
                "org_level": 2,
                "org_info": null,
                "children": [
                    {
                        "id": 162,
                        "label": "财务部",
                        "org_type": 6,
                        "org_level": 3,
                        "org_info": null,
                        "children": []
                    }
                ]
            }
        ]
    }]
}

馒头甜不甜？