Vue项目使用mt-picker实现省市区三级联动踩坑记录

<mt-popup v-model="popupVisible" position="bottom">
  <div class="pickerTitle">
    <a-button type="link" @click="popupClose">取消</a-button>
    <h4>选择地区</h4>
    <a-button type="link" @click="handlePopup">确定</a-button>
  </div>
  <mt-picker v-if="addSlots.length === 0"></mt-picker>
  <mt-picker v-else
             :slots="addSlots"
             value-key="name"
             :itemHeight="50"
             :visibleItemCount="3"
             @change="addressChange">
  </mt-picker>
</mt-popup>

data () {
  return {
    popupVisible: false,
    addData: [],
    addSlots: [{
      flex: 1, //对应 slot CSS 的 flex 值
      values: [ //省份数组
        {
          code: '',
          name: '',
          key: 0,
        }
      ],
      className: 'slot1', //对应 slot 的类名
      textAlign: 'right' //对应 slot 的对齐方式
    }, {
      flex: 1,
      values: [
        {
          code: '',
          name: '',
          key: 0,
        }
      ],
      className: 'slot2'
    }, {
      flex: 1,
      values: undefined,
      className: 'slot3',
      textAlign: 'left'
    }],
    addValue: [//确定时赋值
      {name:'',code:''},//省
      {name:'',code:''},//市
      {name:'',code:''},//区
    ],
    addValue1: [//选中的数据
      {name:'',code:''},//省
      {name:'',code:''},//市
      {name:'',code:''},//区
    ],
  }
},
methods: {
  getRegion(){//获取省市区数据，需要一个初始值。
    let that = this,
          add = [], add1 = [],
          pd = that.addData,
          cd = pd[0].child;
        for (let prop in pd) {
          add.push({name: pd[prop].title, code: pd[prop].ad_code, key: Number(prop)})
        }
        that.addSlots[0].values = add //设置组件的省数据
        for (let prop in cd) {
          add1.push({name: cd[prop].title, code: cd[prop].ad_code, key: Number(prop)})
        }
        that.addSlots[1].values = add1 //设置组件的市的数据
  },
  popupShow (type) {
    let that = this;
    that.popupVisible = true;
  },
  popupClose () {
    this.popupVisible = false;
  },
  addressChange (picker, values) {//选中数据改变时
    let that = this;
    if (that.addData[values[0].key]) { //判断省的key值，类似于 v-if 的效果（可以不加，但是会报错，很不爽）
      let cd = that.addData[values[0].key].child, //市的数据
        ad = cd[values[1].key].child, //区的数据
        c = [],
        a = [];
      for (let i in cd) {
        c.push({name: cd[i].title, code: cd[i].ad_code, key: Number(i)}) //循环出市的数据
      }
      picker.setSlotValues(1, c);//赋给第二个 slot
      for (let i in ad) {
        a.push({name: ad[i].title, code: ad[i].ad_code, key: Number(i)}) //循环出区的数据
      }
      picker.setSlotValues(2, a); //复制给第三个 slot
      for (let i in values){ // 将选中的数据缓存一下
        if (values[i]) {
          that.addValue1[i].code = values[i].code;
          that.addValue1[i].name = values[i].name;
        } else {
          that.addValue1[i].code = '';
          that.addValue1[i].name = '';
        }
      }
    }
  },
  handlePopup () { //点击确实时，将缓存的数据赋值给 addValue ，实现前端显示。
    for (let i in this.addValue){
      if (this.addValue[i]) {
        this.addValue[i].code = this.addValue1[i].code;
        this.addValue[i].name = this.addValue1[i].name;
      }
    }
    this.popupVisible = false;
  }
},