Vue2+springboot实现三级联动

1.在vue中实现省市县的下拉框 省、市级的下拉框绑定一个change事件

 <el-form-item label="省" prop="provinceId">
          <el-select v-model="form.provinceId" placeholder="请选择省" @change="provinceChange">
            <el-option
              v-for="dict in provinceList"
              :key="dict.id"
              :label="dict.cityname"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="cityId">
          <el-select v-model="form.cityId" placeholder="请选择市" @change="cityChange">
            <el-option
              v-for="dict in cityList"
              :key="dict.id"
              :label="dict.cityname"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="县" prop="countyId">
          <el-select v-model="form.countyId" placeholder="请选择县">
            <el-option
              v-for="dict in countyList"
              :key="dict.id"
              :label="dict.cityname"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>

2. 在data中声明省市县的三个数组

  provinceList:[],
      cityList:[],
      countyList:[],

 3.在vue的生命周期函数中 查询省级数据

  created() {
    //TODO:三级联动
    this.getCityList("1").then(response=>{
      this.provinceList=response.data;
    })
  },

4.前后端交互（api的xxxjs文件）

//TODO:三级联动
export function getCityList(pid) {
  return request({
    url: '/system/city/citylist/'+pid,
    method: 'get',
  })
}

5.在方法中写入省、市的绑定事件

  methods: {
    provinceChange(){
      this.getCityList(this.form.provinceId).then(response=>{
        this.cityList=response.data;
      })
    },
    cityChange(){
      this.getCityList(this.form.cityId).then(response=>{
        this.countyList=response.data;
      })
    },
}

6.controller层

package com.ruoyi.web.controller.system;

import java.util.List;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.ruoyi.common.annotation.Log;
import com.ruoyi.common.core.controller.BaseController;
import com.ruoyi.common.core.domain.AjaxResult;
import com.ruoyi.common.enums.BusinessType;
import com.ruoyi.system.domain.TCity;
import com.ruoyi.system.service.ITCityService;
import com.ruoyi.common.utils.poi.ExcelUtil;
import com.ruoyi.common.core.page.TableDataInfo;

/**
 * 地区Controller
 * 
 * @author ruoyi
 * @date 2024-01-11
 */
@RestController
@RequestMapping("/system/city")
public class TCityController extends BaseController
{
    @Autowired
    private ITCityService tCityService;



    @PreAuthorize("@ss.hasPermi('system:city:query')")//TODO:此处为权限 可不写
    @GetMapping("/citylist/{pid}")
    public AjaxResult cityList(@PathVariable Integer pid)
    {
        List<TCity> list = tCityService.searchTCityList(pid);
        return AjaxResult.success(list);
    }

}

 7.实现类

package com.ruoyi.system.service.impl;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.ruoyi.system.mapper.TCityMapper;
import com.ruoyi.system.domain.TCity;
import com.ruoyi.system.service.ITCityService;

/**
 * 地区Service业务层处理
 * 
 * @author ruoyi
 * @date 2024-01-11
 */
@Service
public class TCityServiceImpl implements ITCityService 
{
    @Autowired
    private TCityMapper tCityMapper;

 

    @Override
    public List<TCity> searchTCityList(Integer pid) {
        return tCityMapper.searchTCityListByPid(pid);
    }
}

8.xml写sql

    <select id="searchTCityListByPid" resultType="com.ruoyi.system.domain.TCity">
        select * from t_city where pid=#{value}
    </select>

9.效果