el-cascader 动态加载懒加载

参考链接：https://www.cnblogs.com/ruyijiang/p/18022629

 <el-cascader
            v-model="ruleForm.tagTree"
            placeholder="请选择关联标签"
            :props="props"
            clearable
          ></el-cascader>

data() {
    return {
      props: {
        checkStrictly: true, //是否可以选择树干节点作为选项
        lazy: true, // 是否动态加载子节点
        // lazyLoad加载动态数据的方法(仅在 lazy 为 true 时有效)
        lazyLoad: this.loadTreeNode,
      },
    };

//加载树节点  首次加载页面时就会执行一次，之后每选中一个节点也会调用，来渲染下一层
    loadTreeNode(node, resolve) {
      // 首次加载时 node为{root:true,level:0}
      // node 节点数据  获取node的level字段的值
      const { level } = node;
      //下一层节点
      const nodes = [];
      //如果有子节点 或者 为根节点（即首次进入level为0）
      //也有人写成 node.level == 0 作用是一样的
      if (node.hasChildren || node.root) {
        // 0 代表第一次请求
        let nodeId = level == 0 ? "" : node.data.id;
        //这里setTimeout的目的是 显示加载动画
        setTimeout(() => {
          let params = {
            parentId: nodeId,
          };
          cameraTreeApi(params).then((res) => {
            if (res.data.status == 200) {
              let nodes = [];
              nodes = res.data.data;
              nodes.map((val) => {　　　　　　　　　　//对后台数据进行一下处理，转成规定的label和value
                val.label = val.name;
                val.value = val.id;
              });
              // 回调渲染下一层
              resolve(nodes);
            }
          });
        }, 1);
      } else {
        //如果没有子节点就不发起请求，直接渲染，也避免了点击叶子节点仍然有加载动画的问题
        resolve(nodes);
      }
    },