使用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