使用mint ui 的picker解決城市三級聯動

<mt-popup v-model="popupVisible" position="bottom">   
   <div class="pop-btn">
　　   <p @click="cancel()">取消</p>
      <p @click="save()">確定</p>
   </div>
   <mt-picker :slots="slots" value-key="name" @change="changeCity"></mt-picker>
</mt-popup>

new Vue({
  data(){
    return(){
        slots: [
          {
            flex: 1,
            defaultIndex: 1,
            values: [], //省份數組
            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'
          }
        ],
        popupVisible:false,//是否顯示popup彈出層
    }
  } 
  methods:{
      //城市的picker改變時調用
      changeCity(picker, values) {
        if (values[0]) {
          picker.setSlotValues(1, Object.keys(this.pca[values[0]]));//只要有一級數據就綁二級數據
          picker.setSlotValues(2, this.pca[values[0]][values[1]]);//只要有二級數據就幫三級數據
          this.selectAddress = values;
        }
      },
　　　　//獲取城市數據
      _getCityData() {
        $.ajax({
          url: '/static/json/pca.json',
          type: 'get',
          success: function (res) {
            vm.pca = res;
            vm.slots[0].values = Object.keys(res);//綁定一級數據
          }
        });
      }
  },
  mounted() {
    this._getCityData();
   }

})    

城市數據地址 github：https://github.com/artiely/Administrative-divisions-of-China

城市數據地址 碼雲：https://gitee.com/yagerya/Administrative-divisions-of-China