vue2 el-cascader 多选数据不回显

### Vue2 中 `el-cascader` 组件多选数据不回显解决方案

#### 问题概述
在使用 Element UI 的 `el-cascader` 组件时，如果遇到多选模式下数据无法正确回显的情况，通常是因为组件未能正确识别并处理已有的选择项。这可能涉及到配置选项、事件监听器以及如何传递和接收数据。

#### 关键点解析
为了使 `el-cascader` 支持多选并且能够正常回显之前的选择，在设置该组件时需要注意几个方面：

- **v-model**: 此属性用于双向绑定选中的值列表。对于多选情况来说，应该是一个二维数组的形式[[^1]]。

- **props对象**: 它包含了定义子节点与父节点关系的关键字段名称以及其他一些自定义行为的参数。特别是当启用懒加载特性时，需指定`lazy` 和 `lazyLoad` 方法来异步获取子节点的数据 [[^3]].

- **options 属性**: 提供初始状态下可见的所有顶级分类项作为可选项集合。这些选项应当按照树形结构组织好，并且每一条记录都应包含完整的层级信息以便于后续匹配操作 [].

- **@change 事件处理器**: 当用户做出新的选择之后会触发此回调函数。这里可以用来同步更新视图状态或是向服务器发送请求刷新关联资源 [].

针对上述提到的问题，下面给出具体的实现方法:

<template>
  <div id="app">
    <!-- 使用 el-cascader 并开启 multiple 模式 -->
    <el-cascader
      :options="options"
      v-model="selectedOptions"
      clearable
      filterable
      :props="{multiple:true}"
      @change="handleChange"></el-cascader>
    
    {{ selectedOptions }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [], // 初始化为空数组, 实际应用中通过接口获取
      selectedOptions:[],// 默认选中项也设为空数组
    };
  },
  methods:{
     handleChange(value){
       console.log('changed:', value);
     }
  },
  mounted(){
    this.loadInitialData(); // 加载初次展示所需的基础数据
  },
  methods: {
    loadInitialData () { 
        //模拟从服务端拉取基础数据
        setTimeout(() => {
          this.options = [
            {
              label:'省份A',
              children:[
                {label:"城市AA",value:"aa"},
                {label:"城市AB",value:"ab"}
               ]
             },
             ...
           ];
         }, 500); 
    }   
}
};
</script>

这段代码展示了如何初始化一个带有默认值的 `el-cascader` 控件，并确保其能够在页面重新加载后依然保持之前的选取结果不变。注意这里的 `loadInitialData()` 函数是用来模拟实际开发过程中可能会调用的服务端API查询逻辑；而在真实环境中，则需要替换为相应的AJAX请求或其他形式的数据抓取手段 [].