省市区三级联动（ssm+vue.js+bootstrap+mysql）

一、数据库表

https://download.csdn.net/download/m0_37987151/11233695

二、xml

<select id="queryByParentId" resultType="实体类">
        select *        
        from city_region where region_parent_id = #{value}
</select>

实体类、Dao层跳过

service、serviceImpl层

List<类名> queryByParentId(Object value);

实现方法

@Override
    public List<CityRegionEntity> queryByParentId(Object value) {      
        return baseMapper.queryByParentId(value);
    }

controller层

@Autowired
    private 实体Service xxservice;

    /**
     * 列表
     */
    @RequestMapping("/queryByParentId")
    public R queryByParentId(String parentId){
        if(parentId==null||"".equals(parentId)){
            return R.error("参数为空");
        }
        List<CityRegionEntity> resultList=xxservice.queryByParentId(parentId);
        return R.ok().put("data", resultList);
    }

前端

html

<div class="form-group">
                <div class="col-sm-2 control-label">归属地</div>
                <div class="col-sm-10" style="display:flex">
                    <select class="col-xs-4 form-control genusaddr" id="provinceCode4" style="flex: 1" v-model="region4.provinceCode4"
                            οnchange="vm.onChangeRegion4(event,2)">
                        <option value="">请选择</option>
                        <option :value="item.id" v-for="item in provinceList4">{{item.regionName}}</option>
                    </select>
                    &nbsp;&nbsp;
                    <select class="col-xs-4 form-control genusaddr" id="cityCode4" style="flex: 1" v-model="region4.cityCode4"
                            οnchange="vm.onChangeRegion4(event,3)">
                        <option value="">请选择</option>
                        <option :value="item.id" v-for="item in cityList4">{{item.regionName}}</option>
                    </select>
                    &nbsp;&nbsp;
                    <select class="col-xs-4 form-control genusaddr" id="areaCode4" style="flex: 1" v-model="region4.areaCode4">
                        <option value="">请选择</option>
                        <option :value="item.id" v-for="item in areaList4">{{item.regionName}}</option>
                    </select>
          </div>
</div>

vue.js

var vm = new Vue({
    el:'#rrapp',
    data:{
        showList: true,
        title: null,
        dept:{           
        },
        //区域
          provinceList4: [],
        cityList4: [],
        areaList4: [],
        region4: {
            provinceCode4: '',
            cityCode4: '',
            areaCode4: ''
        }
    },

methods: {
          getRegionInfo4: function (code, type, oldCode) {
                  $.get(baseURL + "equipment/cityregion/queryByParentId", {parentId: code}, function (r) {
                      if (r && r.code == 0) {
                          if (type == 1) {
                              vm.provinceList4 = r.data;
                          } else if (type == 2) {
                              vm.cityList4 = r.data;
                              setTimeout(function () {
                                  if (oldCode) {
                                      vm.$set(vm.region4, 'cityCode', oldCode);
                                  }
                              }, 500);
                          } else {
                              vm.areaList4 = r.data;
                              setTimeout(function () {
                                  if (oldCode) {
                                      vm.$set(vm.region4, 'areaCode', oldCode);
                                  }
                              }, 500);
                          }
                      }
                  });
              },
              onChangeRegion4: function (ele,type) {
                  var val=$(ele.target).val();
                  if(val&&type){
                      this.getRegionInfo4(val,type);
                  }else if(type){
                      if(type==2){
                          vm.cityList4=[];
                          vm.areaList4=[];
                      }else {
                          vm.areaList4=[];
                      }
                  }
                  if (type == 2) {
                      vm.region4.cityCode4 = "";
                      vm.region4.areaCode4 = "";
                  } else {
                      vm.region4.areaCode4 = "";
                  }             

      }

},

mounted: function () {
          this.getRegionInfo4(0,1);
      },

});