vue 使用 elementui 如何实现机构树懒加载，官方文档中的感觉不太对，是一次性全加载出来啊，如何实现点击一次加载下级？

Question

官方api中的感觉不太对，只是把一次性加载分成了多个请求而已，并不是真正的懒加载

Answer 1

这是官方例子中的代码，给你写个注释。

loadNode(node, resolve) {
    // level = 0 的时候是根节点，直接给了个固定值 region
    if (node.level === 0) {
        return resolve([{ name: "region" }]);
    }
    // level > 1 的时候不处理，返回空数组表示没有子节点
    if (node.level > 1) return resolve([]);

    // 用 setTimeout 模拟异步加载
    setTimeout(() => {
        // 假设异步从服务器得到了这个数据
        const data = [
            { name: "leaf", leaf: true },
            { name: "zone" }
        ];

        // 把它作为子节点 resolve，给控件加载成子节点
        resolve(data);
    }, 500);
}

再给你补一段示例，在上面的函数中加的

loadNode(node, resolve) {
    console.log("node", node);
    // level = 0 的时候是根节点，直接给了个固定值 region
    if (node.level === 0) {
        return resolve([{ name: "region" }]);
    }

    // (by James) 给你补个示例，再加载一层，还是用 setTimeout 来模拟异步
    if (node.data.name === "zone") {
        setTimeout(() => {
            resolve([
                { name: "上海", leaf: true },
                { name: "北京", leaf: true },
                { name: "南京", leaf: true },
                { name: "杭州", leaf: true },
            ]);
        }, 500);
        return;  // 别忘了这个
    }

    // level > 1 的时候不处理，返回空数组表示没有子节点
    if (node.level > 1) return resolve([]);

    // 用 setTimeout 模拟异步加载
    setTimeout(() => {
        // 假设异步从服务器得到了这个数据
        const data = [
            { name: "leaf", leaf: true },
            { name: "zone" }
        ];

        // 把它作为子节点 resolve，给控件加载成子节点
        resolve(data);
    }, 500);
}

https://codepen.io/jamesfancy...

---

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

关于饿了么UI的树的懒加载，我之前写过这样一篇文章，楼主看看或许能帮上您一点忙 ^_^

https://segmentfault.com/a/11...