Vue Mint-UI 省市区地址三级联动

最近公司项目中用到收货地址的功能，遂采用这种联动的方式

¶一、实现效果

功能的实现参考了部分资料：

1、vue mint-ui 三级地址联动这篇文章中间联动部分的代码写的不是很好，直接复制是联动不了的。

2、Mint UI Picker 的源码 Mint UI 官网 Picker 二级联动的代码，有一定的参考意义。

3、中国行政区划数据：省份、城市、区县、乡镇，省市区镇三级四级联动有二、三、四、五级的地名联动，在 README.md 中下载需要的 json 文件即可（打包下载，部分文件无港澳台地区的联动）。

4、pca-code.json

5、这篇随笔的代码：addAddress.vue

¶二、具体实现

¶1、HTML 部分

<li class="m-default-address" @click="addressPopup = true">
  <div>
    <span class="m-border"></span>
    <span class="m-label"><span class="m-must">*</span> 省市区</span>
  </div>
  <div>
    <div class="m-address-text">{{addressText}}</div>
    <!--<span class="m-icon-more"></span>-->
  </div>
</li>

<!--省市区地址三级联动-->
<mt-popup class="m-address-popup" v-model="addressPopup" position="bottom">
  <div class="m-popup-btn">
    <div @click="addressPopup = false">取消</div>
    <div @click="addressDone">确认</div>
  </div>
  <div class="m-popup-btn">
    <div></div>
    <div>{{myAddressProvince}}-{{myAddressCity}}-{{myAddressArea}}</div>
    <div></div>
  </div>
  <mt-picker :slots="myAddressSlots" value-key="name" :visibleItemCount="7" @change="onMyAddressChange"></mt-picker>
</mt-popup>

¶2、JavaScript 部分

data() {
  return {
    name: '',
    user: {},
    address: { uadefault: "0" },
    addressText: "请选择省-市-区",
    addressPopup: false,
    myAddressSlots: [
      {
        flex: 1,
        defaultIndex: 1,
        values: myaddress, //省份数组
        className: 'slot1',
        textAlign: 'center'
      }, {
        divider: true,
        content: '-',
        className: 'slot2'
      }, {
        flex: 1,
        values: [],
        className: 'slot3',
        textAlign: 'center'
      },{
        divider: true,
        content: '-',
        className: 'slot4'
      },{
        flex: 1,
        values: [],
        className: 'slot5',
        textAlign: 'center'
      }
    ],
    myAddressProvince: '',
    myAddressCity: '',
    myAddressArea: '',
  }
}

// 地址三级联动
onMyAddressChange(picker, values) {
  if(values[0]) {      // 判断values[0]是否有值
    picker.setSlotValues(1, values[0].children);    // 将所点击省份拿到的城市list赋值
    this.myAddressProvince = values[0].name;
    if(values[1]) {      // 判断values[1]是否有值
      picker.setSlotValues(2, values[1].children);  // 将所点击城市拿到的区县list赋值
      this.myAddressCity = values[1].name;
      if(values[2]) {      // 判断values[2]是否有值
        this.myAddressArea = values[2].name;
        this.address.aaid = values[2].code;
      }
    }
  }
},
// 省市区三级联动选择后
addressDone() {
  this.addressText = this.myAddressProvince + "-" + this.myAddressCity + "-" + this.myAddressArea;
  this.addressPopup = false;
}

created() {
  common.changeTitle('添加地址');
  this.getUser();         // 获取用户信息

  this.$nextTick(() => { //vue里面全部加载好了再执行的函数 （类似于setTimeout）
    this.myAddressSlots[0].defaultIndex = 0;
    // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
    //因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
  });
}