el-cascader懒加载 超简单的回显

el-cascader懒加载 超简单的回显

达成前提

1. 需要后端提供要选中的节点在树中的完整路径。
2. 需要后端提供根据id查询下一级菜单的懒加载接口。

实现

将上两个前提条件，按照以下代码填入；

<el-cascader :props="props" multiple  v-model="value"></el-cascader>

data() {
      return {
        value: [1,2,5],//这里是后端返回的，需要回显的节点的路径
        props: {
          lazy: true,
          lazyLoad (node, resolve) {//这里是后端提供根据id查询下一级菜单的懒加载接口（此处用element官方实例的setTimeout模拟，实际使用请勿模仿！）
            const { level } = node;
            setTimeout(() => {
              const nodes = Array.from({ length: level + 1 })
                .map(item => ({
                  value: ++id,
                  label: `选项${id}`,
                  leaf: level >= 2
                }));
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
            }, 1000);
          }
        }
      };
    }

效果

el-cascader会自动按照写在value里的路径去调用lazyLoad方法实现路径菜单的懒加载，直到整条路径被加载出来。
以下是懒加载的过程：