三级联动组件
<div id="app">
<template>
<el-select v-model="name" placeholder="省份" @change="getCityList(name)">
<el-option
v-for="item in provinceList"
:key="item.code"
:label="item.name"
:value="item.code">
</el-option>
</el-select>
</template>
<template>
<el-select v-model="cityName" placeholder="城市" @change="getTownList(cityName)">
<el-option
v-for="item in cityList"
:key="item.code"
:label="item.cityName"
:value="item.code">
</el-option>
</el-select>
</template>
<template>
<el-select v-model="townName" placeholder="区县">
<el-option
v-for="item in townList"
:key="item.code"
:label="item.townName"
:value="item.code">
</el-option>
</el-select>
</template>
</div>
页面效果如下:
script 代码如下
<script>
new Vue({
el:"#app",
data() {
return{
//省份数据
provinceList:[],
//城市数据
cityList:[],
//区县数据
townList:[],
//省份下拉框模型对象
name:'',
//城市下拉框模型对象
cityName:'',
//区县下拉框模型对象
townName:''
}
},
created(){
$axios({
url:"/province/provinceList",
method:"get"
}).then(res=>{
this.provinceList=res;
});
},
methods:{
getCityList(code){
//清空市级和区县的下拉框中内容
this.cityName='';
this.townName='';
//接收省级的code作为条件去查,拿到数据,将数据给城市变量
$axios({
url:"/province/cityList?code="+code,
method: 'get',
}).then(res=>{
this.cityList=res;
})
},
getTownList(code){
//接收城市的code作为条件去查,拿到数据,将数据给区县变量
$axios({
url:"/province/townList?code="+code,
method: 'get',
}).then(res=>{
this.townList=res;
})
}
}
})
</script>
对Element-ui组件以及vue不太熟悉可以先学习一下
Vue学习之从入门到神经(两万字收藏篇)_白大锅的博客-CSDN博客_vue学习之从入门到神经
Element-UI详解_一名努力的小码农的博客-CSDN博客_element-ui
下面是Controller层的代码,service和dao层只是继承了MP的API没有代码
@Controller
@RequestMapping("/province")
public class ProvinceController {
@Autowired
private ProvinceService provinceService;
@Autowired
private CityService cityService;
@Autowired
private TownService townService;
@RequestMapping("/index.html")
public String index(){
return "list";
}
@GetMapping("/provinceList")
@ResponseBody
public List<Province> provinceList(){
return provinceService.list();
}
@GetMapping("/cityList")
@ResponseBody
public List<City> cityList(String code){
LambdaQueryWrapper<City> queryWrapper=new LambdaQueryWrapper<>();
queryWrapper.eq(code!=null,City::getProvincecode,code);
return cityService.list(queryWrapper);
}
@GetMapping("/townList")
@ResponseBody
public List<Town> townList(String code){
LambdaQueryWrapper<Town> queryWrapper=new LambdaQueryWrapper<>();
queryWrapper.eq(code!=null,Town::getCitycode,code);
return townService.list(queryWrapper);
}
}
这里只是演示三级联动效果所以只有list.html这一个页面