SpringBoot + Element 省 市 县/区 三级联动

效果展示:

实现思路： 

1、下拉框绑定自定义实体参数对象，下拉框选项动态绑定自定义数组对象:

省：

<el-select v-model="provinceAreaCode" placeholder="请选择" @change="getCityList">
            <el-option
                v-for="(item,index) in provinceList"
                :key="index"
                :label="item.areaName"
                :value="item.areaCode">
                {{ item.areaName }}
            </el-option>
        </el-select>

市：

 <el-select v-model="cityAreaCode" placeholder="请选择" @change="getAreaList">
            <el-option
                v-for="(item,index) in cityList"
                :key="index"
                :label="item.areaName"
                :value="item.areaCode"
            >
                {{ item.areaName }}
            </el-option>
        </el-select>

区/县：

<el-select v-model="streetAreaCode" placeholder="请选择">
            <el-option
                v-for="(item,index) in areaList"
                :key="index"
                :label="item.areaName"
                :value="item.areaCode"
            >
                {{ item.areaName }}
            </el-option>
        </el-select>

2、VUE实例化对象中定义自定义参数实体对象，下拉框选项动态绑定自定义数组对象：

data() {
    return {
       loading: true,
        // 省list
        provinceList: [],
         // 省code
        provinceAreaCode: this.province,
         // 市list
        cityList: [],
        // 市code
        cityAreaCode: this.city,
        // 区list
        areaList: [],
        // 区code
        streetAreaCode: this.myArea
    }
  }

3、VUE 实例方法定义定义获取下拉框选项的后台接口，并在vue 实例化时完成接口后端调用

4、$emit：子传父

     props：父传子

 

相关代码：

VUE +ElementUI 源码：

 <style>
</style>
<template>
     <section>
         <el-select v-model="provinceAreaCode" placeholder="请选择" @change="getCityList">
            <el-option
                v-for="(item,index) in provinceList"
                :key="index"
                :label="item.areaName"
                :value="item.areaCode">
                {{ item.areaName }}
            </el-option>
        </el-select>
         <el-select v-model="cityAreaCode" placeholder="请选择" @change="getAreaList">
            <el-option
                v-for="(item,index) in cityList"
                :key="index"
                :label="item.areaName"
                :value="item.areaCode"
            >
                {{ item.areaName }}
            </el-option>
        </el-select>
         <el-select v-model="streetAreaCode" placeholder="请选择">
            <el-option
                v-for="(item,index) in areaList"
                :key="index"
                :label="item.areaName"
                :value="item.areaCode"
            >
                {{ item.areaName }}
            </el-option>
        </el-select>

     </section>
</template>

<script>
export default {
  name: 'User',
  props:{
    /**
    * 省
    */
    province: {
      type: String,
      required: false,
      default: () => null
    },
    /**
    * 市
    */
    city: {
      type: String,
      required: false,
      default: () => null
    },
    /**
     *  区
    */
    myArea: {
      type: String,
      required: false,
      default: () => null
    }
   },
  data() {
    return {
       loading: true,
        // 省list
        provinceList: [],
         // 省code
        provinceAreaCode: this.province,
         // 市list
        cityList: [],
        // 市code
        cityAreaCode: this.city,
        // 区list
        areaList: [],
        // 区code
        streetAreaCode: this.myArea
    }
  },
  watch:{
     /**
     * 监听省code
     * @param val
      */
      provinceAreaCode(val) {
        console.log("provinceAreaCode" + val);
        this.$emit('update:province', val)
      },
       /**
       * 监听省
       * @param val
       */
       province(val) {
         console.log("province" + val);
          this.provinceAreaCode = val
          if (val) {
              this.getCityList(val)
          }
      },
      /**
      * 监听市code
      * @param val
      */
      cityAreaCode(val) {
        console.log("cityAreaCode" + val);
        this.$emit('update:city', val)
      },

      /**
      * 监听市
      * @param val
      */
      city(val) {
        console.log("city" + val);
        this.cityAreaCode = val
        if (val) {
           this.getAreaList(val)
        }
      },
      /**
       * 监听区code
       * @param val
       */
      streetAreaCode(val) {
        console.log("streetAreaCode" + val);
        this.$emit('update:myArea', val)
      },
      /**
      * 监听区
      * @param val
      */
      myArea(val) {
        console.log("myArea" + val);
        this.streetAreaCode = val
      }
  },
   methods: {
       /**
        * 获取省
        */
        getProvince() {
          var self = this
          this.$axios.get('/location/find')
          .then(function (res) {
            self.provinceList = [];
            res.data.data.forEach(item => {
                let arr = {
                    areaName: item.name,
                    areaCode: item.code
                };
                self.provinceList.push(arr);
            });
          })
          .catch(function (err) {
            console.log(err)
          })
        },
         /**
        * 获取市
        * @param id
        */
        getCityList(id) {
          var self = this
          this.$axios.get('/location/city?areaCode=' + id)
          .then(function (res) {
            self.cityList = [];
            res.data.data.forEach(item => {
                let arr = {
                    areaName: item.name,
                    areaCode: item.code
                };
                self.cityList.push(arr);
            });
          })
          .catch(function (err) {
            console.log(err)
          })
        },
        /**
        * 获取地区
        * @param id
        */
        getAreaList(id) {
          var self = this
          this.$axios.get('/location/area?areaCode=' + id)
          .then(function (res) {
            self.areaList = [];
            res.data.data.forEach(item => {
                let arr = {
                    areaName: item.name,
                    areaCode: item.code
                };
                self.areaList.push(arr);
            });
          })
          .catch(function (err) {
            console.log(err)
          })
        }

   },
   mounted() {
     this.getProvince()
   }

}
</script>

SpringBoot 后端代码:

package com.zzg.controller;

import java.io.File;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.regex.Pattern;
import java.util.stream.Collectors;

import org.apache.commons.io.FileUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Controller;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;

@Controller
@RequestMapping("/api/location")
@CrossOrigin
@Api(value = "模拟测试Controlle", tags = "模拟测试操作服务")
public class TestLocation {
	static JSONArray array = null;
	static {
		try {
			String path = ResourceUtils.getURL("classpath:data.json").getPath();
			File file = new File(path);
			if(file.exists()) {
				String content = FileUtils.readFileToString(file,"UTF-8");
				if(StringUtils.isNotEmpty(content)) {
					array = JSONArray.parseArray(content);
				}
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			System.out.println(e.getMessage());
		}
	}
	
	@RequestMapping(value="/find", method={RequestMethod.GET}, produces = "application/json;charset=UTF-8")
	@ResponseBody
	@ApiOperation(httpMethod = "GET", value = "模拟测试对象查询")
	public String find() {
		List<JSONObject> list = null;
		if(array != null) {
			list = array.stream().filter(item ->{
				JSONObject object = (JSONObject)item;
				String code = object.getString("code");
				return Pattern.matches("^[\\s\\S]*0000$", code);
			}).map(item ->{
				return (JSONObject)item;
			}).collect(Collectors.toList());
		}

		
		JSONObject obj = new JSONObject();
		obj.put("code", 0);
		obj.put("data", list);
		return obj.toJSONString();
	}
	
	@RequestMapping(value="/city", method={RequestMethod.GET}, produces = "application/json;charset=UTF-8")
	@ResponseBody
	@ApiOperation(httpMethod = "GET", value = "模拟测试对象查询")
	public String city(@RequestParam(required = false) String areaCode) {
		// 省编码:
		System.out.println("省编码:" + areaCode.substring(0, 1));
		List<JSONObject> list = null;
		if(array != null) {
			list = array.stream().filter(item ->{
				JSONObject object = (JSONObject)item;
				String province = object.getString("province");
				String code = object.getString("code");
				Object obj = object.get("area");
				
				boolean target = true;
				if(obj instanceof String) {
					target = false;
				}
				return province.equalsIgnoreCase(areaCode.substring(0, 2)) && !Pattern.matches("^[\\s\\S]*0000$", code) && target;
			}).map(item ->{
				return (JSONObject)item;
			}).collect(Collectors.toList());
		}

		
		JSONObject obj = new JSONObject();
		obj.put("code", 0);
		obj.put("data", list);
		return obj.toJSONString();
	}
	
	@RequestMapping(value="/area", method={RequestMethod.GET}, produces = "application/json;charset=UTF-8")
	@ResponseBody
	@ApiOperation(httpMethod = "GET", value = "模拟测试对象查询")
	public String area(@RequestParam(required = false) String areaCode) {
		// 省编码:
		System.out.println("省编码:" + areaCode.substring(0, 2));
		System.out.println("市编码:" + areaCode.substring(2, 4));
		List<JSONObject> list = null;
		if(array != null) {
			list = array.stream().filter(item ->{
				JSONObject object = (JSONObject)item;
				// 省编码
				String province = object.getString("province");
				// 唯一编码
				String code = object.getString("code");
				// 市编码
				String city = object.getString("city");
				// 区域编码
				Object area = object.get("area");
				boolean target = true;
				if(area instanceof Integer) {
					target = false;
				}
				return province.equalsIgnoreCase(areaCode.substring(0, 2)) && city.equalsIgnoreCase(areaCode.substring(2, 4)) && !Pattern.matches("^[\\s\\S]*0000$", code) && target;
			}).map(item ->{
				return (JSONObject)item;
			}).collect(Collectors.toList());
		}

		
		JSONObject obj = new JSONObject();
		obj.put("code", 0);
		obj.put("data", list);
		return obj.toJSONString();
	}


}