iview 获取省市区(通过调接口获取)

需求

通过调后台接口获取省市区地址

环境

vue+vue-cli+iview
iview表单链接

效果图

布局

<template>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="110" label-position="left" style="margin-left: 30px" class="font_size">
    <FormItem label="开户银行名称" prop="backName">
       <Select v-model="formValidate.province" @on-open-change="chooseProvince"  placeholder="请选择省" style="width: 20%">
          <Option v-for="item in provinceList" :key="item.regionName" :value="item.regionName" :label="item.regionName" @click.native="clickPrvince(item)"></Option>
        </Select>
      <Select v-model="formValidate.city"  placeholder="请选择市" style="width: 20%">
         <Option v-for="item in cityList" :key="item.regionName" :value="item.regionName" :label="item.regionName"></Option>
       </Select>
   </FormItem>
 <Form/>
<template/>

逻辑

export default{
  data(){
  formValidate:{
        province: '',
        city: '',
        back: ''
      },
      provinceList: [],
      cityList: [],
      backList: [],
},
methods:{
  //获取所有省
    chooseProvince(){
      let _this = this;
      _this.$axios.get('/app/app/v1/region/provinces',{
        params:{
          parentId: 0,
          type: 1, //type类型：1省级，2市级，3区级
        }
      })
      .then(res => {
        if (res.code == 1){
          //获取到所有省份
              this.provinceList = res.data
           } else {
          autoCloseAlert(res.msg)
        }
      })
    },
    //选中省,获取市
    clickPrvince(item){
      console.log(item); //当前选中省的信息
      let _this = this;
      _this.$axios.get('/app/app/v1/region/provinces',{
        params:{
          parentId: item.id, //根据当前省的id来获取市
          type: 2, //type类型：1省级，2市级，3区级
        }
      })
        .then(res => {
          if (res.code == 1){
            this.cityList = res.data
          } else {
            autoCloseAlert(res.msg)
          }
        })
    }
}
}

因需求不同，我这里只展示了省市，区的写法参考获取市的方法。