当前位置:Gxlcms > JavaScript > 使用mint-ui实现省市区三级联动效果

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

时间:2021-07-01 10:21:17 帮助过:53人阅读

下面我就为大家分享一篇使用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'
 }, {
  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实现省市区三级联动效果的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行