Spring-boot+Element-ui简单三级联动实现

 三级联动组件

<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这一个页面