element-UI的 Cascader 级联选择器 动态加载数据及回显

<template>
  <!-- 测试懒加载 -->
  <el-cascader :props="test_props" :options="test_options" v-model="test_model"></el-cascader>
</template>

<script>
let id2 = 0;

export default {
  name: 'TestView',
  data() {
    return {
      test_options: [
        //回显值得关键必须要把需要回显的都写到options里面，且最后一项要加上leaf:true,表示无下级了才可以回显；这里写死，实际要根绝接口返回的需要回显的数据，来递归循环到结果，赋值给这里；
      ],
      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 {
                id: 1,
                value: `选项${id2}`,
                label: `选项${id2}`,
                leaf: level >= 1
              };
            });
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          }, 1000);
        }
      }
    };
  },
  created() {
    setTimeout(() => {
      this.test_options = [
        {
          value: '选项1',
          label: '选项1',
          id: 2,
          leaf: false,
          children: [{ value: '选项3', label: '选项3', leaf: true }]
        },
        {
          value: '选项2',
          label: '选项2'
        }
      ];
    }, 20000);
  }
};
</script>

要回显，那么第一级要有数据，选中的第二级，第三级也要对应上

比如省市区
第一级所有省需要有，第二级，选择的省下的所有市，第三级，选择的所有的市下的区县，回显数据格式注意好，不对是回显不了的

获取到所有省，判断要回显的省的id和当前省的id一样的，用这个省的id请求这个省的所有市，循环所有市，判断要回显的市的id，然后拿市的id请求所有区，最后给options赋值

我这里是文字，存的时候就是文字，所以需要这样，如果是id，那就简单了，直接拿对应的id请求就行，就是组装好和写死的数据一样的格式就行