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

宇智波bug

于 2020-07-04 15:50:53 发布

阅读量5.2k

点赞数 12

文章标签： vue

本文链接：https://blog.csdn.net/weixin_46857582/article/details/107125222

版权

需求

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