ElementUI 省市区多选搜索（前台+后台传参）详细

用到的ElementUi组件

直达链接： https://element.eleme.cn/#/zh-CN/component/select

效果

一、前台（element-ui+vue）
1）添加组件

2）js部分，添加到return里

3）加入查询数组定义

4）搜索方法内添加

if(this.searchOptions.length>0){

        var cityCode = this.searchOptions;
        var zoneCode = this.searchOptions;

        /*省市区选择处理数据 start*/
        var provinceList = new Array();
        var cityList = new Array();
        var zoneList = new Array();

        cityCode.forEach(cit => {
          if(cit[1] != 'undefined' && cit[1] != undefined && cit[1] != null && cit[1] != ''){
            // cityList.push(CodeToText[cit[1]]);
          }else if(cit[0] != 'undefined' && cit[0] != undefined && cit[0] != null && cit[0] != ''){
            provinceList.push(CodeToText[cit[0]]);
          }
        });
        zoneCode.forEach(zon => {
          if(zon[2] != 'undefined' && zon[2] != undefined && zon[2] != null && zon[2] != ''){
            zoneList.push(CodeToText[zon[2]]);
          }else if(zon[1] != 'undefined' && zon[1] != undefined && zon[1] != null && zon[1] != ''){
            cityList.push(CodeToText[zon[1]]);
          }
        });

        let provinceListSet = new Set(provinceList);
        let cityListSet = new Set(cityList);
        let zoneListSet = new Set(zoneList);

        var proResult = "";
        var citResult = "";
        var zonResult = "";

        provinceListSet.forEach( ptemp =>{
          proResult = proResult + ptemp + ',';
        })
        cityListSet.forEach( ctemp =>{
          citResult = citResult + ctemp + ',';
        })
        zoneListSet.forEach( ztemp =>{
          zonResult = zonResult + ztemp + ',';
        })
        /*end*/

        this.queryParams.province = proResult;
        this.queryParams.city = citResult;
        this.queryParams.zone = zonResult;
      }else{
        this.queryParams.province = null;
        this.queryParams.city = null;
        this.queryParams.zone = null;
      }

二、后台方法
String，接收，sql处理

       if(StrUtil.isEmpty(paperMailInfo.getProvince())){
            paperMailInfo.setProvince(null);
        }
        if(StrUtil.isEmpty(paperMailInfo.getCity())){
            paperMailInfo.setCity(null);
        }
        if(StrUtil.isEmpty(paperMailInfo.getZone())){
            paperMailInfo.setZone(null);
        }

  <if test='zone != null or province != null or  city != null '>
                and (
                <if test='province != null'>
                    a.province in
                    <foreach item="id" collection='province.split(",")' open="(" separator="," close=")">
                        #{id}
                    </foreach>
                </if>
                <if test='city != null'>
                    <if test='province != null'>or</if>
                    a.city in
                    <foreach item="id" collection='city.split(",")' open="(" separator="," close=")">
                        #{id}
                    </foreach>
                </if>
                <if test='zone != null'>
                    <if test='province != null or city != null'>or</if>
                    a.zone in
                    <foreach item="id" collection='zone.split(",")' open="(" separator="," close=")">
                        #{id}
                    </foreach>
                </if>
                )
            </if>

用到的省市区js放到下载了，命名为city.js引入
import { regionData } from “@/api/paper/city-data/city”;
点击下载省市区js
齐活=