地址选择、无限级选择

vue 实现省市区选择和多级选择

效果图

实现思路

分为两个模块，一个模块用于显示选择的结果，另一个用于显示选择的列表，在点击列表的中的选项时，隐藏当前的选项列表，显示下一个选项的列表

结构代码：

    <div class="address">
          <section class="title">
            <div class="area" @click="provinceLeve()" :class="province?'':'active'">{
  {province?province:'请选择'}}</div>
            <div class="area" @click="cityLeve()" v-show="this.showCityList.length > 0" :class="city?'':'active'">{
  {city?city:'请选择'}}</div>
            <div class="area" @click="countryLeve()" v-show="this.showCountryList.length > 0" :class="country?'':'active'">{
  {country?country:'请选择'}}</div>
          </section>
          <ul>
            <li class="addList clearfix" v-for="item in showProvinceList" :key="item.name" @click="getProvince(item)" v-show="showProvince">
              <div>{
  {item.name}}</div>
              <div v-show="item.city">></div>
            </li>
            <li class="addList clearfix" v-for="item in showCityList" :key="item.name" @click="getCity(item)" v-show='showCity'>
              <div>{
  {item.name}}</div>
              <div v-show="item.area">></div>
            </li>
            <li class="addList clearfix" v-for="(item, i) in showCountryList" :key=&