前端 | 按首字母排序的省市区三联控件

需求是一个省市区三联控件，先选择省，再选择市，最后是区，并且按首字母分类排序

如下图：

分别选择省市区

思路是找一个带首字母带全国地址json数据就搞定了，哈哈哈，但是并找不到，那么就自己创建一个呀！

这里用到的辅助工具库有：1、lodash 2、pinyin

一、首先下载一个包含全国地址的json数据

传送门：https://github.com/huangyilu/nationalAddressJSON/blob/master/address_data.json

包含全国地址的json数据
分析一下这个数据：1、没有排序 2、没有按首字母区分组

二、修改json数据

我们现在已经有了全国的地址数据，那么可以利用汉字转拼音取首字母的方式，对数据进行分组并排序。
汉字转拼音在npm上有很多，这里用的是第一个。

这个pinyin包，在iOS 9.x.x上，会出错，所以我们只是利用他来作为辅助工具生成我们自己的json数据

pinyin_npm.png
对数据进行处理需要借助lodash（一个一致性、模块化、高性能的 JavaScript 实用工具库）
分组用的是groupBy方法（https://www.lodashjs.com/docs/4.17.5.html#groupBy）
排序用的是sortBy方法（https://www.lodashjs.com/docs/4.17.5.html#sortBy）
先排序后分组，最后生成的数据：
address_final.png
json文件我都放在(https://github.com/huangyilu/nationalAddressJSON/blob/master/address_final_data.json)这里啦，需要的可以自行下载

三、根据key渲染html

最后一步，我们已经有了分好组并排好序的数据了，那么只需要利用tabIndex控制省市区显示顺序，key值作为字母标题即可完成。

<template>
  <div class="help-address-province-item">
    <div class="hap-title__icon">
      <div class="back-icon" @click="bindGoBackFn"></div>
      <div>选择地址</div>
      <div class="cancel-icon" @click="bindCancelFn"></div>
    </div>

    <div class="hap-title__item">
      <div :class="['item-tit', { 'active' : tabIndex===1 }]">{{ province }}</div>
      <div :class="['item-tit', { 'active' : tabIndex===2 }]" v-if="tabIndex>1">{{ city }}</div>
      <div :class="['item-tit', { 'active' : tabIndex===3 }]" v-if="tabIndex>2">{{ area }}</div>
    </div>

    <div class="hap-title__content">
      <!-- 省 -->
      <div
        class="content-item"
        v-for="(value, key, index) in addressData"
        :key="index"
        v-if="tabIndex===1"
      >
        <div class="item__key">{{ key }}</div>
        <div class="item__pro">
          <div
            :class="['item', { 'pro-bottom-none': proi+1 === value.length || value.length <= 1 }]"
            v-for="(proItem, proi) in value"
            :key="proi"
            @click="bindProFn(key, proi)"
          >
            <div class="name">{{ proItem.name }}</div>
            <div class="select-icon" v-if="proItem.name === province"></div>
          </div>
        </div>
      </div>
      <!-- 市 -->
      <div
        class="content-item"
        v-for="(value, key, index) in cityData"
        :key="index"
        v-if="tabIndex===2"
      >
        <div class="item__key">{{ key }}</div>
        <div class="item__pro">
          <div
            :class="['item', { 'pro-bottom-none': cityi+1 === value.length || value.length <= 1}]"
            v-for="(cityItem, cityi) in value"
            :key="cityi"
            @click="bindCityFn(key, cityi)"
          >
            <div class="name">{{ cityItem.name }}</div>
            <div class="select-icon" v-if="cityItem.name === city"></div>
          </div>
        </div>
      </div>
      <!-- 区 -->
      <div
        class="content-item"
        v-for="(value, key, index) in areaData"
        :key="index"
        v-if="tabIndex===3"
      >
        <div class="item__key">{{ key }}</div>
        <div class="item__pro">
          <div
            :class="['item', { 'pro-bottom-none': areai+1 === value.length || value.length <= 1}]"
            v-for="(areaItem, areai) in value"
            :key="areai"
            @click="bindAreaFn(key, areai)"
          >
            <div class="name">{{ areaItem }}</div>
            <div class="select-icon" v-if="areaItem === area"></div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="help-confm__btn"
      :class="{ 'iphonex-bottom' : isIphoneX }"
      @click="bindAddressConfm"
    >确认</div>
  </div>
</template>

四、最终效果

address.gif