vue element-ui el-cascader级联选择器数据回显的两种实现方法

  <el-cascader
              ref="myCascader"
              clearable
              v-model="regionValue"
              :options="regionOptions"
              :props="regionProps"
              @change="handleChangeRegion"
     ></el-cascader>

export default {
  data() {
    return{
      regionValue: ['name1','name2','name3'],  //（注：name1，name2，name3的数据要和name一样） 通过id回显   regionValue: ['id1','id2','id3']  
      regionOptions: [],
      regionProps: {
        value: 'name',   //如果想通过id回显就   value:'id'
        label: 'name',
        children: 'children',
      },
    }
  }
}

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