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 方法