Cascader级联选择器怎么动态加载数据？

司马淑涵提问于 2026-03-30 08:36:16 阅读 2

组件

我在用Element Plus的Cascader做地区选择，但数据太多不想一次性全加载，想点击一级菜单再请求下一级。官方文档说可以用lazyLoad，但我试了总是报错。

我写了这个方法，但控制台提示Cannot read property 'children' of undefined，是不是写法有问题？

const lazyLoad = (node, resolve) => {
  const { level } = node;
  setTimeout(() => {
    const nodes = [{ value: '1', label: '选项1', leaf: false }];
    resolve(nodes);
  }, 1000);
};

我来解答赞 3 收藏

反馈

1 条解答

秀玲 Lv1

看起来你对 lazyLoad 的理解基本是对的，但确实有几个关键点需要注意。常见的解决方案是确保每个节点的数据结构完整，并且正确处理叶子节点。

首先你的代码中缺少对根节点的判断。当 level 为0时，应该返回第一级数据。然后在加载子节点时要确保有 children 属性。

修改后的代码大概这样：

const lazyLoad = (node, resolve) => {

  const { level, value } = node;

  setTimeout(() => {

    let nodes = [];

    if (level === 0) {

      nodes = [

        { value: '1', label: '选项1', leaf: false },

        { value: '2', label: '选项2', leaf: false }

      ];

    } else {

      // 模拟根据父节点获取子节点

      nodes = [

        { value: ${value}-1, label: 选项${value}-1, leaf: true }

      ];

    }

    resolve(nodes);

  }, 1000);

};

记得把 leaf 设置为 true 或 false 来标识是否还有子节点。这个坑我踩过好多次了，希望这次能帮到你。

2026-03-30 09:01