el-cascader 动态加载，编辑时数据回显

参考链接：https://blog.csdn.net/qq_16382227/article/details/129735904

业务：只有选择了关联摄像头以后才能显示出选择预置位，关联摄像头是联级逐次触发掉接口加载的，后续还需要回显。

html:

          <el-cascader

            v-model="ruleForm.cameraTree"

            placeholder="请选择关联摄像头"

            popper-class="whiteClass"

            @change="cameraChange"

            :props="props"

            clearable

          ></el-cascader>

       <el-form-item

          label="预置位"

          prop="cameraPresetPoint"

          v-if="ruleForm.cameraTree"

        >

          <el-select

            v-model="ruleForm.cameraPresetPoint"

            placeholder="请选择预置位"

            popper-class="whitePopper"

            clearable

          >

            <el-option

              v-for="v in treeData"

              :key="v.presetPointIndex"

              :label="v.presetPointName"

              :value="v.presetPointIndex"

            >

            </el-option>

          </el-select>

        </el-form-item>

 

 

 data() {

    return {

      loading: false,

      props: {

        checkStrictly: true, //是否可以选择树干节点作为选项

        lazy: true, // 是否动态加载子节点

        // lazyLoad加载动态数据的方法(仅在 lazy 为 true 时有效)

        lazyLoad: this.loadTreeNode,

      },

    };

 

js:

    //加载树节点  首次加载页面时就会执行一次，之后每选中一个节点也会调用，来渲染下一层
    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);
      }
    },




//选择摄像头
    cameraChange(val) {
      let id = "";
      let len = val.length;
      if (len > 0) {
        id = val[len - 1];
        this.ruleForm.cameraPresetPoint = "";
        this.treeData = [];
        this.getList(id);
      } else {
        id = "";
        this.ruleForm.cameraPresetPoint = "";
        this.treeData = [];
      }
    },
    // 预置点信息
    getList(id) {
      let params = {
        id: id,
      };
      getPresetsApi(params).then((res) => {
        if (res.data.status == 200) {
          this.treeData = res.data.data;
        }
      });
    },