Vue+ElementUI实现动态获取数据库中城市地区，按照字母顺序进行排序，并能根据当前地区筛选不同的活动

今天接到一个需求：要把地区中的死数据换成数据库中的地区，并且根据切换的地区展示不同的活动；但是数据库中并没有拼音这个字段，老板说新增一个拼音字段，在写个方法填进去就可以了，个人太懒了，就参考了这位博主的文章城市名称按首字母分组排序，并实现多音字处理_紫宸殇雒的博客-优快云博客

 

 

 并且根据切换地区不同展示不同的活动

 

话不多说，上代码

	<div class="List">
					<el-row :gutter="10" class="outList" v-if="this.bankingActivities.length !=0">
						<el-col  :md="12" :xs="24"  v-for="item in bankingActivities" style="margin-top: 10px;">

								<div class="user-box" >
									<div class="ta-title">
                    {{item.bankName}}
                  </div>
									<div class="ta-line"></div>
									<!-- <a :href="item.equityDetails"> -->
										<div class="ta-img">
											<img :src="item.logoMapperAddress"/>
										</div>
									<!-- </a> -->
								<!-- 	<a :href="item.equityDetails"> -->
										<div class="ta-c" v-html="item.activityDetail">
											
										</div>
									<!-- </a> -->
									<div class="ta-button">
										<el-button  type="success" @click="goApply(item.applicationLink)">免费申请</el-button>
										<!-- <a :href="item.id">免费申请</a> -->
									</div>
									<div style="clear: both;">

                  </div>
								</div>

						</el-col>
					</el-row>
          <el-empty v-else description="暂无银行活动！"></el-empty>
				</div>

	/* 回调子组件城市名称 */
			cityName(value){
				this.region = value

        this.getBankingActivities(this.region);
        // console.log("this.region",this.region)
			},	/** 获取当前城市*/
			refresh(){
				getCityName().then((city) =>{
					this.region = city
          this.getBankingActivities(this.region)
				})

			},/** 获取地区 */
			getAreaList(){
			  getAreaList().then((res) => {
			    // console.log('地区====', res)
			    if(res.code == 200){
			      this.areaList = res.data;
			    }
			  })
			},
			/** 获取银行活动列表 */
			getBankingActivities(cityName){
        getBankIdsByAreaName({'areaName': cityName}).then(response =>{
          if (response.data.length !== 0){
            let bankIds = response.data;
            listPartBank(bankIds).then(res=>{
              this.bankingActivities = res.rows;
            })

          }else {
            this.bankingActivities = [];
          }

        })
			}

 业务：

/**
     * 给地区生成拼音并排序
     * @param area 地区
     * @return 排序好的地区和拼音
     */
    @Override
    public Map sortAreaName(Area area) {
//        List<String> areaNames = areaMapper.selectAreaName();
//        Collator cmp = Collator.getInstance(Locale.CHINA);
//        areaNames.sort(cmp);
        //获取城市对象列表
        List<Area> areas = areaMapper.selectAreaListIgnoreParent(area);
        //按照城市名称分组，方便后面进行首字母分组获取城市对象
        Map<String, Area> map = areas.stream().collect(Collectors.toMap(Area::getName, Area -> Area));
        //获取所有城市名称
        List<String> keyCollect = map.keySet().stream().collect(Collectors.toList());
        //封装返回结果
        Map<String,Object> result = new HashMap<>();
        try {
            //按照首字母进行城市分组
            Map<String, List<String>> codeGroup = ChangeChinesePinyinUtil.getCodeGroup(keyCollect);
            //将分组对象转化成前端所需格式类型
            List<WxMainCitysForClientVO> citys = new ArrayList<>();
            codeGroup.forEach((k,v) -> {
                WxMainCitysForClientVO citysForLetter = new WxMainCitysForClientVO();
                citysForLetter.setLetter(k);
                List<Area> list = new ArrayList<>();
                v.forEach(i->{
                    Area area1 = new Area();
                    BeanUtils.copyProperties(map.get(i),area1);
                    list.add(area1);
                });
                citysForLetter.setData(list);
                citys.add(citysForLetter);
            });
            result.put("itemArr",citys);
        } catch (PinyinException badHanyuPinyinOutputFormatCombination) {
            throw new BaseException("转换首字母异常！");
        }
        return result;

    }