使用mint-ui实现省市区三级联动效果

引用插件：饿了么的mint-ui组件中的picker功能，具体API可参照官网说明：http://mint-ui.github.io/docs/#/zh-cn2/picker

背景：项目需要做一个省份-城市-地区的选择级联效果，我从gayhub上找了一下，决定使用mint-ui的组件，因为各个功能都很全而且设计跟我们的项目风格类似。

具体实现：

通过阅读官网的实例，大概就能知道这个组件的用法：

在vue中写入组件：<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>我们可以看到，这个组件中传入的数据slots和当其改变是触发的事件：onValuesChange()，所以只要在使用该组件的父组件内注册slots和onValuesChange就可以实现了

以下是官网上的实例：

export default {  methods: {    onValuesChange(picker, values) {      if (values[0] > values[1]) {        picker.setSlotValue(1, values[0]);      }    }  },  data() {    return {      slots: [        {          flex: 1,          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],          className: 'slot1',          textAlign: 'right'        }, {          divider: true,          content: '-',          className: 'slot2'        }, {          flex: 1,          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],          className: 'slot3',          textAlign: 'left'        }      ]    };  }};

 

 

在实际操作中当我想使用picker来进行省份、城市、地区的选择时，发现最大的问题是搞不到符合该插件数据格式的数据，于是从百度上扒了一份省份、城市、地区数据之后写了一个函数对其进行了处理，在这里，共享给大家：

View Code

 

　　　　　　　　　onProvinceChange(picker, values) {                                        this.province = picker.getValues()[0]                  var cityArr = [];                  for(var key in provinceCity[this.province]) {                      cityArr.push(key);                  }                  this.slots2[0].values = cityArr;                },                onCityChange(picker, values) {                      this.city = picker.getValues()[0]                      var countyArr = [];                      for(var key in provinceCity[this.province][this.city]) {                      countyArr.push(key);                  }                  this.slots3[0].values = countyArr;                },                onCountyChange(picker, values) {                                        this.county = picker.getValues()[0]                },

三组数据以及三个方法如上，当对省份进行选择时，动态匹配相应的城市，同理对城市进行选择时动态匹配相应的地区，如此就可以实现三级联动的效果了