vue+mint-ui地址三級or四級聯動

以前寫了一篇先後端一塊兒搞的地址選擇。可是以爲每次滑動的時候都調用好幾回接口很浪費，因此決定前端本身搞吧。

---

首先須要一份地址源啊，後端一次性返給咱們或者本地存一份(在static下)

<template>
<div class="addressFour">
<mt-picker :slots="addressSlots" @change="onAddressChange" :visible-item-count="5"

v-show="valSelect==1"></mt-picker>

<mt-picker :slots="streetSlots" ref="picker" @change="onStreetChange"

:visible-item-count="5" v-show="valSelect==2" ></mt-picker>

</template>
<script>

import address from
'../static/addressFour.json';
export default{

name: 'addressFour',
props: ['valSelect'],
data () {
  return {
    popupVisible: false,//省市區三級
    popupVisible2: false,//街道
    streetRender:true,//街道是否展現
    addressSlots: [
      {
        flex: 1,
        defaultIndex: 1,
        values: Object.keys(address),
        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'
      }
    ],
    streetSlots: [
      {
        flex: 1,
        values: [],
        className: 'slot1',
        textAlign: 'center'
      }
    ],
    addressProvince: '省',
    addressCity: '市',
    county: '區',
    addressStreet: '街道',
  }
},
methods: {
  onAddressChange(picker, values) {
    let shi = Object.keys(address[values[0]]);
    let index = shi.indexOf(values[1])
    let xian = address[values[0]][shi[index]];
    this.xianObj = xian;
    picker.setSlotValues(1, shi);
    this.addressProvince = values[0];
    this.addressCity = values[1];
    if (values[2]) {//有時爲undefined
      this.county = values[2];
    }
    this.$emit('addressProvince', values[0]);
    this.$emit('addressCity', values[1]);
    this.$emit('county', values[2]);
    let address_full = picker.getValues();
    if (address_full[address_full.length - 1] != undefined) {//會出現四組值，一組有效
      this.$emit('addressFull', picker.getValues());
    }
    if (xian) {//xian報undefined,報錯
      picker.setSlotValues(2, Object.keys(xian));
    }
  },
  onStreetChange(picker, values){
    this.addressStreet = values[0];
    this.$emit('addressStreet', values[0]);
  },
},
watch: {
  'county': {
    handler(val, oval){
      let street = this.xianObj[val];
      if(street.length===0){
          this.streetRender=false;
          this.$emit('noPopup',false);
          return;
      }
      this.streetRender=true;
      this.streetSlots[0].values = street;
    },
  }
},
mounted(){
  this.$nextTick(() => {
    setTimeout(() => {
      this.addressSlots[0].defaultIndex = 0;
    }, 100);
  });
}

}
</script>

---

一些參數說明：

• addressFour.json:這個是四級地址庫，網上隨意搞一個比較全的就好。
• valSelect這個參數控制三級地址仍是街道展現
• noPopup：是否有四級(直轄市有的只有三級)
• Object.keys這個方法w3c也有，能夠去看看

至此，地址三級和四級就均可以用了，三級只需valSelect置爲1便可

父組件引用很簡單，每一個人使用方式也不一樣，就不列舉了
本文借鑑：https://www.cnblogs.com/cools...