element Cascader懒加载，由数据导致的回显问题

1、今天在做一个城市选择的model时候发现了一个问题记录一下。

(1)、我们先看非懒加载的方式

                <el-form-item label="发货地址" required>
                  <el-cascader v-model="modelInfo.sendCityObj" :options="modelInfo.sendCityOptions" size="mini"
                    @change="handleChangeCity" clearable></el-cascader>
                </el-form-item>

        sendCityObj:[1,1,1],
        sendCityOptions: [
          {label: '1111', value: 1, children: [{label: '1111', value: 1, children:[{label: '1111', value: 1}]}]},
          { label: '2222', value: 2, children: [{}] },
          { label: '3333', value: 3, children: [{}] },
        ],

这是非懒加载的模式下sendCityObj:[1,1,1]这种多层级值相同是可以回显的。但是这种在懒加载的情况下就有问题了。

(2)、动态懒加载的方式

                  <el-cascader  :props="modelInfo.xzProps" v-model="modelInfo.cityObj"
                    :options="modelInfo.cityOptions" size="mini" @change="handleChangeCity" clearable></el-cascader>
                </el-form-item>

        xzProps: {
          label: 'label',
          value: 'value',
          code: 'code',
          checkStrictly: true,
          lazy: true, //设置lazyLoad，必须配合lazy：true
          checkStrictly: true,
          lazyLoad: this.lazyLoadXzqh,
        },
        cityOptions: [],//城市下拉框

                async lazyLoadXzqh(node, resolve) {
                    console.log(node)//这里输出懒加载的node
                    let options = []
                    if (node.level == 0) {
                      await axios.get(`https://tools.canqu.com.cn/api/province/query`).then(response => {
                        if (response.data) {
                          response.data.forEach(item => {
                            let node = ({ label: item.Name, value: item.Id, code: item.Code});
                            options.push(node);
                          });
                        }
                      }).catch(err => {
                      });
                    }
                    if (node.level == 1) {
                       await axios.get(`https://tools.canqu.com.cn/api/city/queryByProvinceId?provinceId=${node.value}`).then(response => {
                        if (response.data) {
                          response.data.forEach(item => {
                            let node = { label: item.Name, value: item.Id, code: item.Code }
                            options.push(node);
                          });
                        }
                      }).catch(err => {
                      });
                    }
                    if (node.level == 2) {
                      await axios.get(`https://tools.canqu.com.cn/api/county/getByCity?cityId=${node.value}`).then(response => {
                        if (response.data) {
                          response.data.forEach(item => {
                            let node = { label: item.Name, value: item.Id, code: item.Code,leaf:true }
                            options.push(node);
                          });
                        }
                      }).catch(err => {
                      });
                    }
                    resolve(options);
                },

（3）这种动态加载的时候，有时候城市的多层级ID是相同的，如北京市-北京市-双桥区，返回的id是[1,1,1]。但是会默认回显的时候它显示不出来。

我通过观察它输出的node信息发现他调用了三次，第一次是一级目录的初始化，在初始化二级和三级目录的时候后两次的层级都是1，第三次的层级应该是2。就是因为这种原因倒是回显不出来。

这种情况只在动态懒加载的时候会出现这种问题。因为有些城市接口返回的层级id有可能是相同的。

注意：这时候我们要手动处理一下接口返回给我们的城市ID。

这个问题也是耽搁了一会儿时间。