下面我就为大家分享一篇使用mint-ui实现省市区三级联动效果的示例代码，具有很好的参考价值，希望对大家有所帮助。
引用插件：饿了么的mint-ui组件中的picker功能，具体api可参照官网说明：http://mint-ui.github.io/docs/#/zh-cn2/picker
背景：项目需要做一个省份-城市-地区的选择级联效果，我从gayhub上找了一下，决定使用mint-ui的组件，因为各个功能都很全而且设计跟我们的项目风格类似。
具体实现：
通过阅读官网的实例，大概就能知道这个组件的用法：
在vue中写入组件：585056dc1277ca83a0083a97e6a125fcb0a88308a1fcec81e78d04c5268ef556
我们可以看到，这个组件中传入的数据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' }, { pider: true, content: '-', classname: 'slot2' }, { flex: 1, values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], classname: 'slot3', textalign: 'left' } ] }; }};
在实际操作中当我想使用picker来进行省份、城市、地区的选择时，发现最大的问题是搞不到符合该插件数据格式的数据，于是从百度上扒了一份省份、城市、地区数据之后写了一个函数对其进行了处理，在这里，共享给大家：
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] },
三组数据以及三个方法如上，当对省份进行选择时，动态匹配相应的城市，同理对城市进行选择时动态匹配相应的地区，如此就可以实现三级联动的效果了
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
使用vue2.0.js实现多级联动选择器
通过javascript实现比较同一天的时间大小
在react、vue项目中如何使用svg
以上就是使用mint-ui实现省市区三级联动效果的详细内容。