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="(i