element——懒加载树

 <el-tree ref="tree" :props="defaultProps" :data="dataTree" node-key="id" lazy :load="loadNode" :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{ data }">
                        <el-tooltip class="item" effect="dark" :content="data.name" placement="top-start">
                            <span @click="handleNodeClick(data)">
                                <i class="iconfont  labletree" :class="data.rank? 'icon-ever-yiji1': 'icon-ever-sanji' "></i>{{ data.name }}
                            </span>
                        </el-tooltip>
                    </span>
                </el-tree>

  defaultProps: {
                children: 'subList',
                label: 'name' // 树节点名字
            }

  // 点击节点
        handleNodeClick(data) {
        },
        // 懒加载获取树节点
        loadNode(node, resolve) {
            // 获取第一节点
            if(node.level == 0) {
                this.loadFirstNode(resolve);
            }
            // 获取下一级节点
            if(node.level > 0 && node.level < 4) {
                this.loadChildrenNode(node,resolve);
            }
            if(node.level >= 4) { return resolve([]); };
        },
        // 加载第一级
        loadFirstNode(resolve) {
            return resolve([
                {
                    name: '仓库',
                    subList: [],
                    id:0,  //当前节点id
                    type: 0 // 树的下一级类型，0表示仓库、1表示区域、2表示物料
                }
            ]);
        },
        // 加载节点子集
        loadChildrenNode(node,resolve) {
            let data = [];
            switch(node.data.type) {
                case 0:
                    data = [{
                        name: '原材料库',
                        subList: [],
                        rank: true,
                        type: 1
                    }];
                    break;
                case 1:
                    data = [{
                        name: '板材区',
                        subList: [],
                        rank: true,
                        type: 2
                    }];
                    break;
                case 2:
                    data = [{
                        name: '实木板',
                        subList: [],
                        rank: true,
                        type: 3
                    }];
                    break;
            }
            resolve(data);
        }
    }

  // 加载节点子集
        loadChildrenNode(node,resolve) {
            let url = '';
            let params = {};
            // 树结构字段名
            let nameList = ['warehouseName','regionName','materialName'];
            switch(node.data.type) {
                case 0:
                // 查询仓库
                    url = '/warehouse/warehouse/pageList';
                    params = {
                        pageNumber: 1,
                        pageSize: 999
                    };
                    break;
                case 1:
                    // 查询区域
                    url = '/warehouse/warehouseRegion/listByCondition';
                    params = {
                        warehouseId: node.data.id
                    };
                    break;
                case 2:
                    // 查询物料
                    url = '/warehouse/warehouseMaterial/listByCondition';
                    params = {};
                    break;
            }
            if(node.data.type <= 3) {
                this.$http.post(this.$htCkService + url,params)
                    .then(({data: d}) => {
                        if(d.code == 0) {
                            let key = nameList[node.data.type];
                            let tempData = d.data.records ? d.data.records : d.data;
                            let treeResult = tempData.map(e => {
                                return {
                                    name: e[key],
                                    subList: [],
                                    id: e.id,
                                    type: node.data.type + 1
                                };
                            });
                            resolve(treeResult);
                        }else{
                            resolve([]);
                        }
                    });
            }
        }

// 刷新当前树节点的子节点
        refreshNodeData(id) {
            // 获取当前点击的树节点
            let node = this.$refs.tree.getNode(id);
            node.expanded = false; // 收起当前节点
            node.loaded = false;
            node.expand(); // 展开节点，重新查询该节点下的所有子节点
        }