element ui 级联选择器动态加载子菜单，使用多选并且关联父子节点时无法返回选中节点的问题

1. element ui 级联选择器动态加载子菜单，使用多选并且关联父子节点时无法返回选中节点的正确实现

<template>
  <div>
    <div class="df jsw mtb10 top-box">
      <div class="rightBox">
        <el-cascader
          v-model="selected.cascader"
          :props="cascaderProps"
          @change="standChange"
          placeholder="全部变电站"
          size="small"
          collapse-tags
        ></el-cascader>
    <div>
  </div>
</template>

<script>
import { getSubControlAreaList } from '@/api/zts-gis/subControlArea' 
import { getSubstationList } from '@/api/zts-gis/substation'
import { getMeasurementList } from '@/api/zts-gis/measurement'

export default {
  data() {
    return {
      // 级联选择器
      cascaderProps: {
        lazy: true,
        multiple: true,
        maxLevel: this.maxLevel,
        // checkStrictly: true,
        lazyLoad (node, resolve) {
          const { level } = node;
          // console.log("node", node)
          // console.log("resolve", resolve)
          if( level == 0 ){
            getSubControlAreaList().then((response) => {
              console.log("所有片区", response)
              if(response.code == 0 ){
                let area = response.data.map((v) => {
                  // console.log(1684, level, this.maxLevel, level >= this.maxLevel-1)
                  if(level >= this.maxLevel-1) {
                    return {
                      value: v.id,
                      label: v.name,
                      leaf: true
                    }
                  }else{
                    return {
                      value: v.id,
                      label: v.name
                    }
                  }
                })
                resolve(area);
              }
            })
          }else if( level == 1 ){
            if(level >= this.maxLevel-2){
              resolve([]);
            }
            let id = node.value
            getSubstationList({ areaId: id }).then((response) => {
              console.log("所有厂站", response)
              if(response.code == 0 ){
                let area = response.data.map((v) => {
                  if(level >= this.maxLevel-1) {
                    return {
                      value: v.id,
                      label: v.name,
                      leaf: true
                    }
                  }else{
                    // 为每一个节点添加一个不显示的叶子节点，使没有加载到最后一个选项时前面的选项可选中           
                    return {
                      value: v.id,
                      label: v.name,
                      children: [
                        {
                          value: null,
                          label: null,
                          leaf: true
                        }
                      ]
                    }
                  }
                })
               
                // node.data.children = area
                resolve(area);
              }
            })
          }else if( level == 2 ){
            if(level >= this.maxLevel-2){
              resolve([]);
            }

            // 因为前面在父节点的子节点添加了一个空children, 在此删除父节点的children

            node.children = []

            let id = node.value
            getMeasurementList({ substationId: id }).then((response) => {
              console.log("所有变电站", response)
              if(response.code == 0 ){
                let area = response.data.map((v) => {
                  return {
                    value: v.equipment,
                    label: v.name,
                    leaf: true                     // 表示所有层级的最后一层
                  }
                })
                // node.data.children = area
                resolve(area);
              }
            })
          }else{
            resolve([]);
          }
        }
      },

    }
  }
}
</script>

<style lang="scss" scoped> </style>

 

 

若不指定节点的结束层，会无法绑定值到变量中，且不会触发 change 方法