由于项目需要，需要手动封装一个动态加载的地址组件，并且还可以回填，如下图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>