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>