省市区三级联动（ssm+vue.js+bootstrap+mysql）-蒲公英云

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

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

1、数据库表

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

2、xml

实体类、Dao层跳过

service、serviceImpl层

List<类名> queryByParentId(Object value);

实现方法

@Override
public List 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

归属地

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 = “”;
}