Vue2仿淘宝实现省市区三级联动

  <section class="myAddress">    <section>      <section class="cont" @click="choseAdd()">       <section>         <span>所在地区：{{Province?Province:''}} {{City?City:''}} {{District?District:''}}</span>       </section>       <img src="../../assets/main/right.png" alt="">       <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()">         {{Province?Province:info[province-1].name}}       </div>       <div class="area" @click="citySelected()" :class="City?'':'active'">         {{City?City:'请选择'}}       </div>       <div class="area" @click="districtSelected()" :class="District?'':'active'" v-show="City">         {{District?District:'请选择'}}       </div>      </section>      <ul>        <li class="addList" v-for="(v,k) in info"           @click="getProvinceId(v.id, v.name, k)"           v-show="showProvince"           :class="v.selected ? 'active' : ''">{{v.name}}</li>        <li class="addList" v-for="(v,k) in showCityList"           @click="getCityId(v.id, v.name, k)"           v-show="showCity"           :class="v.selected ? 'active' : ''">{{v.name}}</li>        <li class="addList" v-for="(v,k) in showDistrictList"           @click="getDistrictId(v.id, v.name, k)"           v-show="showDistrict"           :class="v.selected ? 'active' : ''">{{v.name}}</li>       </ul>     </section>    </section>    <!-- 页面内容 -->    <section class="cont">      <span>详细地址：</span>      <input type="text" v-model="address" placeholder=" 请填写详细地址">    </section>  </section></template><script>  import {      mapActions,      mapGetters  } from 'vuex';  import api from './../../fetch/api.js'  export default {    name: 'address',    data(){},此处的data直接下载json复制进去即可。http://download.csdn.net/detail/zhaohaixin0418/9862255。    components: {      MineHeader    },    computed: {        ...mapGetters([          'BCcontextPathSrc',          'sessionId',          'token',        ]),  },  methods: {    choseAdd: function() {      this.showChose = true;    },    closeAdd: function() {      this.showChose = false;    },    _filter(add, name, code) {      let result = [];      for (let i = 0; i < add.length; i++) {        if (code == add[i].id) {          result = add[i][name];        }      }      return result;    },    getProvinceId: function(code, input, index) {      this.province = code;      this.Province = input;      this.showProvince = false;      this.showCity = true;      this.showDistrict = false;      this.showCityList = this._filter(this.info, 'city', this.province);      // 点击选择当前      this.info.map(a => a.selected = false);      this.info[index].selected = true;      this.areaProvince = input;    },    provinceSelected: function() {      // 清除市级和区级列表      this.showCityList = false;      this.showDistrictList = false;      // 清除市级和区级选项      this.City = false;      this.District = false;      // 选项页面的切换      this.showProvince = true;      this.showCity = false;      this.showDistrict = false;    },    getCityId: function(code, input, index) {      this.city = code;      this.City = input;      this.showProvince = false;      this.showCity = false;      this.showDistrict = true;      this.showDistrictList = this._filter(this.showCityList, 'district', this.city);      // 选择当前添加active      this.showCityList.map(a => a.selected = false);      this.showCityList[index].selected = true;      this.areaCity = input;    },    citySelected: function() {      this.showProvince = false;      this.showCity = true;      this.showDistrict = false;    },    getDistrictId: function(code, input, index) {      this.district = code;      this.District = input;      // 选择当前添加active      this.showDistrictList.map(a => a.selected = false);      this.showDistrictList[index].selected = true;      // 选取市区选项之后关闭弹层      this.showChose = false;      this.areaDistrict = input;    },    districtSelected: function() {      this.showProvince = false;      this.showCity = false;      this.showDistrict = true;    },    saveProfile: function() {      api.commonApi('后台接口', 这里是贵公司后台接口，按照你们公司的改了就好          'param_key={"head":{"TYPE":"ADD_UPD_INFO",' +          '"SESSION_ID":"' + this.sessionId + '",' +          '"TOKEN":"' + this.token + '","DEVICE_ID":""},' +          '"param":{"PROVINCE":"' + this.areaProvince + '", ' +          '"CITY":"' + this.areaCity + '", "COUNTY":"' + this.areaDistrict + '",' +          '"ADDRESS": "' + this.address + '"}}')          .then(res => {        console.log(res.data);    });    }  }  }</script><style scoped>  .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: 3.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: 100%;    margin-left: 5%;    max-height: 4.4rem;    overflow: auto;  }  .address .title .active {    color: #0071B8;    border-bottom: 0.02rem solid #0071B8;  }  .address ul .active {    color: #0071B8;  }</style>