vue+elementui+el-cascader 动态加载地址组件以及回填功能

需求

由于项目需要，需要手动封装一个动态加载的地址组件，并且还可以回填，如下图git所示：

以上为自己写的一个demo

elmentui: 2.13.2
省市区api接口用的是高德地图的api：高德地图api

由于项目要求，点击省级调用接口取得市级的信息，点击市再调用区级的信息的接口，别问我为什么要这样动态加载，不一次性全部把省市级的信息都获取回来，虽然说高德地图的api接口有提供这种功能，反正就是项目需要，也可能考虑一次性加载比较耗时吧

<template>
  <div class="address">
    <el-cascader
      :props="props"
      style="width: 400px;margin-right: 20px"
      :key="modalKey"//此处给组件设置key属性是为了让组件重新渲染，重新赋值value，就可以实现回填功能
      v-model="value"
    ></el-cascader>
    <el-button @click="changeValue">点击修改</el-button>
    <el-button @click="changeValue2">点击修改2</el-button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          let url =
            `https://restapi.amap.com/v3/config/district?parameters&key=${key需要自己在高德申请}`;
          if (level > 0) {
            url = `https://restapi.amap.com/v3/config/district?parameters&key=${key需要自己在高德申请}&keywords=${node.value}&subdistrict=1`;
          }
          level + 1;
          axios.get(url).then(res => {
            let nodes = res.data.districts[0].districts.map(item => {
              return {
                label: item.name,
                value: item.name,
                leaf: level >= 3
              };
            });
            resolve(nodes);
          });
        }
      },
      value: [],
      modalKey: 0
    };
  },
  created() {},
  mounted() {},
  methods: {
    changeValue() {
      this.value = ["广东省", "深圳市", "南山区", "铁东街道"];
      this.modalKey++;//改变key值，组件重新渲染，实现回填功能
    },
    changeValue2() {
      this.value = ["北京市", "北京城区", "怀柔区", "泉河街道"];
      this.modalKey++;
    }
  }
};
</script>

<style scoped lang="scss">
.address {
  background-color: #409eff;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  padding: 50px;
}
</style>