mint-ui picker 实现省市区县三级联动

实现效果：

首先说一下实现思路：

1.采用单独的js文件存储省市区数据，可以是json或者js文件，数据可参考我的上一篇博客。

2.使用mt-picker进行赋值，(需要提前引入mint-ui)根据省的数据的改变，动态的改变市和区的显示数据。

3.最好采用单独的组件实现，方便修改和复用。

代码：

遇到的问题：

A.当选择区县这一栏时，选择最后一个选项，再重新选择市或者省，则区这一栏数据无法刷新显示，有时候刷新后，区这一栏的数据为未选中。

B.当选择市这一栏最后一个选项后，重新选择省，市这一栏数据无法刷新。

原因我还没有完全弄清，先说解决方法：

监听省市区的数据变化，然后强制对某一栏选中数据进行重定位。

关键代码如下：

 watch:{
        myAddressPrivince(oldval,newval){  //省数据变化后，更新市的显示数据
          this.areapicker.setSlotValues(2,this.mycityList);
          this.areapicker.setSlotValue(2, this.mycityList[0]);   //省的数据变化后，强制将市这一栏的数据定位到第一个
          console.log('选中的省是'+this.myAddressPrivince);
        },
        myAddressCity(oldval,newval){    //城市的值改变后，重置区县的数据
          this.areapicker.setSlotValues(4,this.mydistrictList);
          this.areapicker.setSlotValue(4,this.mydistrictList[0]); //市的数据变化后，强制将区这一栏的数据定位到第一个
          console.log('选中的市是'+this.myAddressCity);
        },
        myAddressDistrict(oldval,newval){
          console.log('选中的区是'+this.myAddressDistrict);
        }

      }