vue省市区三级联动

仿照小米之家做的一个省市区三级联动，先上代码：

HTML：

<template>
  <section class="myAddress">
    <section>
      <section class="cont" @click="choseAdd()">
        <section>
          <span>所在地区：{{Province?Province:''}} {{City && City!== '请选择'?City:''}} {{District && District !== '请选择'?District:''}}</span>
        </section>
        <div style="clear: both"></div>
      </section>
    </section>
    <!-- 省市区三级联动选项 -->
    <section class="showChose" v-show="showChose">
      <section class="address">
        <section class="title">
          <h4>选择您所在的地区</h4>
          <span @click="closeAdd()">×</span>
        </section>
        <section class="title">
          <div class="area" @click="provinceSelected(0)" :class="tabIndex===0?'active':''">
            {{Province?Province:'请选择'}}
          </div>
          <div class="area" @click="citySelected(1)" :class="tabIndex===1?'active':''" v-show="Province">
            {{City?City:'请选择'}}
          </div>
          <div class="area" @click="districtSelected(2)" :class="tabIndex===2?'active':''" v-show="City && hasDistrict">
            {{District?District:'请选择'}}
          </div>
        </section>
          <ul>
            <!-- 常用城市 -->
            <div v-show="showProvince" class="frequentCity">
              <p class="frequentCityTip" v-show="showFrequentCity">常用城市</p>
              <div class="frequentCityList">
                <span class="cityName" v-for="(frequentCity, index) in frequentCitys" :key="'frequentCity'+index" @click="selectFrequentCity(frequentCity)">广州</span>
              </div>
            </div>
            <!-- 省市区列表 -->
            <li class="addList" v-for="(v , k) in info" @click="getProvinceId(v.index, v.AREA_NAME, k)" v-show="showProvince" :class="v.selected ? 'active' : ''">{{v.AREA_NAME}}</li>
            <li class="addList" v-for="(v,k) in showCityList" @click="getCityId(v.index, v.AREA_NAME, k)" v-show="showCity" :class="v.selected ? 'active' : ''">{{v.AREA_NAME}}</li>
            <li class="addList" v-for="(v,k) in showDistrictList" @click="getDistrictId(v.index, v.AREA_NAME, k)" v-show="showDistrict" :class="v.selected ? 'active' : ''">{{v.AREA_NAME}}</li>
            </ul>
        </section>
    </section>
  </section>
</template>

JS：

export default {
  name: 'address',
  data () {
    return {
      showChose: false,             // 是否显示省市区弹框
      showProvince: true,           // 显示省份列表
      showCity: false,              // 显示城市列表
      showDistrict: false,          // 显示区列表
      showCityList: false,          // 城市数据列表
      showDistrictList: false,      // 区数据列表
      province: 5,                  // 当前选择的省份index
      city: 3,                      // 当前选择的城市index
      district: 57,                 // 当前选择的区index
      District: false,              // 区名字
      Province: false,              // 省名字
      City: false,                  // 城市名字
      areaProvince: '',
      areaCity: '',
      areaDistrict: '',
      tabIndex: 0,                  // 当前选择的tab下标
      hasDistrict: true,            // 是否有区
      selected: false,              // 是否选中(active)
      info: [],                     // 后台交互的省市区接口数据
      frequentCitys: [],            // 常用城市数据
      saveCityData: [],             // 存储选择的省市区的缓存数据
      showFrequentCity: false       // 是否显示常用城市
    }
  },
  components: {
  },
  computed: {
  },
  created () {
    // 获取省市区数据
    this.getAreaData()
    // 从缓存读取常用城市数据
    this.frequentCitys = JSON.parse(localStorage.getItem('frequentList'))
    this.saveCityData = JSON.parse(localStorage.getItem('frequentList'))
    if (!this.frequentCitys) {
      this.showFrequentCity = false
    } else {
      this.showFrequentCity = true
    }
  },
  mounted () {
  },
  methods: {
    // 获取省市区数据
    getAreaData () {
      console.log('获取省市区数据')
      this.$root._axios('post', 'url', {})
      .then(res => {
        console.log('res', res.data.nodes)
        if (res.data.nodes.length <= 0) {
          console.log('网络异常')
        } else {
          this.info = res.data.nodes
        }
      })
    },
    // 选择常用城市
    selectFrequentCity: function (frequentCityData) {
      console.log('frequentCityData', frequentCityData)
    },
    // 点击选择省市区
    choseAdd: function () {
      this.showChose = true
    },
    // 关闭弹框
    closeAdd: function () {
      this.showChose = false
    },
    /* eslint-disable */
    // 对选择当前的数据,进行下一级的数据的筛选
    _filter (add, name, code) {
      let result = []
      for (let i = 0; i < add.length; i++) {
        if (code == add[i].index) {
          result = add[i][name]
        }
      }
      return result
    },
    /* eslint-enable */
    // 选择省份列表
    getProvinceId: function (code, input, index) {
      this.tabIndex = 1
      this.province = code
      this.Province = input
      this.showProvince = false
      this.showCity = true
      this.showDistrict = false
      if (!this.City) {
      } else {
        this.City = '请选择'
      }
      if (!this.District) {
      } else {
        this.hasDistrict = false
        this.District = '请选择'
      }
      this.showCityList = this._filter(this.info, 'city', this.province)
      // 点击选择当前
      /* eslint-disable */
      this.info.map(a => a.selected = false)
      /* eslint-enable */
      this.info[index].selected = true
      this.areaProvince = input
    },
    // 点击省份tab
    provinceSelected: function (index) {
      this.tabIndex = index
      // 选项页面的切换
      this.showProvince = true
      this.showCity = false
      this.showDistrict = false
    },
    // 选择城市列表
    getCityId: function (code, input, index) {
      this.tabIndex = 2
      this.city = code
      this.City = input
      this.showProvince = false
      this.showCity = false
      this.showDistrict = true
      this.District = '请选择'
      this.showDistrictList = this._filter(this.showCityList, 'district', this.city)
      console.log('this.showDistrictList', this.showDistrictList)
      // 选择当前添加active
      /* eslint-disable */
      this.showCityList.map(a => a.selected = false)
      /* eslint-enable */
      this.showCityList[index].selected = true
      this.areaCity = input
      // 判断当前选的城市是否有地区
      if (this.showDistrictList.length === 0) {
        this.hasDistrict = false
        this.showDistrict = false
        this.District = false
        this.showChose = false
        // 把选择的省市放入缓存中
        let selectCity = {}
        selectCity.province = this.Province
        selectCity.city = this.City
        selectCity.district = ''
        this.saveCityData.push(selectCity)
        localStorage.setItem('frequentList', JSON.stringify(this.saveCityData))
      } else {
        this.hasDistrict = true
        this.showDistrict = true
      }
    },
    // 点击城市tab
    citySelected: function (index) {
      this.tabIndex = index
      this.showProvince = false
      this.showCity = true
      this.showDistrict = false
    },
    // 选择区列表
    getDistrictId: function (code, input, index) {
      this.district = code
      this.District = input
      // 选择当前添加active
      /* eslint-disable */
      this.showDistrictList.map(a => a.selected = false)
      /* eslint-enable */
      this.showDistrictList[index].selected = true
      // 选取市区选项之后关闭弹层
      this.showChose = false
      this.areaDistrict = input
      // 把选择的数据放入缓存中
      let selectCity = {}
      selectCity.province = this.Province
      selectCity.city = this.City
      selectCity.district = this.District
      this.saveCityData.push(selectCity)
      localStorage.setItem('frequentList', JSON.stringify(this.saveCityData))
    },
    // 点击区tab
    districtSelected: function (index) {
      this.tabIndex = index
      this.showProvince = false
      this.showCity = false
      this.showDistrict = true
    }
  }
}

CSS：

.myAddress {
    width: 100%;
    background-color: white;
    border-top: 4px solid rgba(245, 245, 245, 1);
    color: #333;
  }
  .myAddress .cont {
    border-bottom: 1px solid rgba(245, 245, 245, 0.8);
  }
  .myAddress .cont span {
    display: inline-block;
    font-size: 0.28rem;
    color: #333;
    line-height: 0.88rem;
    margin-left: 0.32rem;
  }
  .myAddress .cont section {
    float: left;
  }
  .myAddress .cont img {
    float: right;
    width: 0.14rem;
    height: 0.24rem;
    margin: 0.32rem 0.32rem 0.32rem 0;
  }
  .showChose {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 120;
    background: rgba(77, 82, 113, 0.8);
  }
  .address {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 121;
    background: #fff;
    width: 100%;
  }
  .title h4 {
    display: inline-block;
    margin-left: 2rem;
    font-size: 0.32rem;
    line-height: 0.88rem;
    font-weight: normal;
    color: #999;
  }
  .title span {
    margin: 0.42rem 0 0 2.2rem;
    font-size: 0.45rem;
    line-height: 0.34rem;
    color: #D8D8D8;
  }
  .area {
    display: inline-block;
    font-size: 0.24rem;
    line-height: 0.88rem;
    margin-left: 0.42rem;
    color: #333;
  }
  .addList {
    padding-left: 0.32rem;
    font-size: 0.34rem;
    line-height: 0.88rem;
    color: #333;
  }
  /* 修改的格式 */
  .address ul {
    height: 6.4rem;
    margin-left: 5%;
    max-height: 6.4rem;
    overflow: auto;
  }
  .address .title .active {
    color: #0071B8;
    border-bottom: 0.02rem solid #0071B8;
  }
  .address ul .active {
    color: #0071B8;
  }
  .frequentCity{
    width: 100%;
  }
  .frequentCityTip{
    text-align: left;font-size: 0.3rem;margin: 0.3rem;font-weight: bold;
  }
  .frequentCityList{
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
    flex-wrap: wrap;margin-right: 5%;margin-left: 5%;
  }
  .cityName{
    letter-spacing: 0.06rem;margin: 0.1rem 0.1rem 0.3rem 0.6rem;font-size: 0.29rem;
  }

逻辑分析：首先调用接口，获取省市区数据，然后对省市区数据进行拆分。

具体分析，后面更新

这个是调用接口返回的数据其中一些，具体的参数还可以根据需求再添加。

info: [
 {
   index: 1,
   AREA_NAME: '北京',
   city: [
    {
     index: 1,
     AREA_NAME: '北京市',
     district: [
       {
         index: 1,
         AREA_NAME: '东城区'
       }, 
       {
         index: 2,
         AREA_NAME: '西城区'
       }, 
       {
         index: 3,
         AREA_NAME: '崇文区'
       }
     ]
    }
  ]
}, 
{
  index: 2,
  AREA_NAME: '河北',
  city: [
    {
      index: 2,
      AREA_NAME: '石家庄市',
      district: [
        {
          index: 4,
          AREA_NAME: '长安区'
         }, 
         {
           index: 5,
           AREA_NAME: '桥东区'
         }, 
          {
            index: 6,
            AREA_NAME: '桥西区'
          }
      ]
    }, 
   {
     index: 3,
     AREA_NAME: '唐山市',
     district: [
      {
         index: 7,
         AREA_NAME: '路南区'
       },
       {
         index: 8,
         AREA_NAME: '路北区'
       },
       {
         index: 9,
         AREA_NAME: '古冶区'
       }
     ]
  }
]