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

忘是亡心i 2021-09-28 23:24 410阅读 0赞

1、数据库表

[https://download.csdn.net/download/m0\_37987151/11233695][https_download.csdn.net_download_m0_37987151_11233695]

2、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);  
      \},

\});

![20190610152902631.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3OTg3MTUx_size_16_color_FFFFFF_t_70][]

![20190610153306938.png][]

[https_download.csdn.net_download_m0_37987151_11233695]: https://download.csdn.net/download/m0_37987151/11233695
[20190610152902631.png]: https://img-blog.csdnimg.cn/20190610152902631.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3OTg3MTUx_size_16_color_FFFFFF_t_70]: /images/20210923/31d519f635a54ffa9b19810eb9701a61.png
[20190610153306938.png]: /images/20210923/a053739e56ba4fd18303118c441951d4.png