Sample Code that uses mint-ui to implement provincial/municipal level-3 linkage effect,

Sample Code that uses mint-ui to implement provincial/municipal level-3 linkage effect,

Reference plug-in: ELE. Me mint-ui component picker function, the specific API can refer to the official site description: http://mint-ui.github.io/docs/#/zh-cn2/picker

Background: The project needs to select a province-city-region cascade effect. I found it from gayhub and decided to use the mint-ui component, because all functions are complete and the design is similar to that of our project.

Specific implementation:

By reading the examples on the official website, you can probably know the usage of this component:

Write components in vue: <mt-picker: slots = "slots" @ change = "onValuesChange"> </mt-picker>

We can see that the data slots passed in this component and the event triggered when the change is: onValuesChange (), therefore, you only need to register slots and onValuesChange in the parent component that uses this component.

The following are examples on the official website:

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' } ] }; }};

In practice, when I want to use picker to select provinces, cities, and regions, I find that the biggest problem is that the data that meets the plug-in data format cannot be obtained, therefore, Baidu obtained a copy of province, city, and region data and wrote a function to process it. Here, we share it with you:

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]  },

The three groups of data and the three methods are as above. When selecting a province, the corresponding city is dynamically matched, and the corresponding region is dynamically matched when selecting a city, in this way, three levels of association can be achieved.

The sample code for using mint-ui to achieve the effect of three levels of linkage between provinces, cities, and cities is all the content shared by Alibaba Cloud. I hope you can provide a reference and support for the customer's house.