elementui的Cascader 級聯選擇器，在懶加載的時候數據無法回顯的解決方案

一：實現思路

定位原因：懶加載的級聯下拉框無法回顯是因為，只綁定了model的值，沒有options的數據支撐的話，獲取不到節點的內容導致；

方案：拿到選中的項的時候，用這些值去遞歸循環獲取相應的節點的一些屬性，賦值給options，然后注意最后一個節點的leaf屬性一定要有且是true了才可以回顯；

 

二：綁定了options還是沒有回顯的可能原因

2.1 賦值options的格式不對；

2.2 賦值的option里面最后一項沒有加上 leaf:true,導致插件以為還有下級所以無法回顯；

2.3 賦值的id數據類型和實際不一致，如果model里面的是字符串，option里面的id也要轉換成字符串；

 

三：實現demo

// test.vue
<template>
    <!-- 測試懶加載 -->
    <el-cascader :props="test_props" :options="test_options" v-model="test_model"></el-cascader>
</template>

<script>
     let id2 = 0;

    export default {
        data(){
            return {
                test_options: [ //回顯值得關鍵必須要把需要回顯的都寫到options里面，且最后一項要加上leaf:true,表示無下級了才可以回顯；這里寫死，實際要根絕接口返回的需要回顯的數據，來遞歸循環到結果，賦值給這里；
          {
            value: '選項1', label: '選項1', children: [{ value: '選項3', label: '選項3', leaf: true }],
          },
          {
            value: '選項2', label: '選項2',
          },
        ],
        test_model: ['選項1', '選項3'],//模擬后台取到的默認值，這里是單選
        test_props: {
          lazy: true,
          lazyLoad(node, resolve) {
            const { level } = node;
            setTimeout(() => {
                const nodes = Array.from({ length: 2 })
                  .map((item) => {
                    ++id2
                    return {
                      value: `選項${id2}`,
                      label: `選項${id2}`,
                      leaf: level >= 1,
                    }
                  });
                // 通過調用resolve將子節點數據返回，通知組件數據加載完成
                resolve(nodes);
            }, 1000);
　　　　　　　}
          }
        }
    }
</script>