Use mint-ui to achieve three-level linkage effects in provinces and municipalities

Below I will share with you a sample code that uses mint-ui to achieve the three-level linkage effect of provinces and municipalities. It has a good reference value and I hope it will be helpful to everyone.

Reference plug-in: the picker function in Ele.me’s mint-ui component. For specific API, please refer to the official website description: http://mint-ui.github.io/docs/#/zh-cn2/picker

Background: The project needs to create a province-city-region selection cascade effect. I searched it on gayhub and decided to use mint-ui components because each function is complete and the design is similar to ours. The project style is similar.

Specific implementation:

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

Write the component in vue:

We can see that this component The data slots passed in and the event that is triggered when it changes: onValuesChange(), so as long as slots and onValuesChange are registered in the parent component that uses this component, it can be achieved

The following is the official website Example:

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

In actual operation, when I wanted to use picker to select provinces, cities, and regions, I found that the biggest problem was that I could not get data that conformed to the data format of the plug-in, so After scraping a province, city, and region data from Baidu, I wrote a function to process it. Here, I 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]
  },

Three sets of data And the three methods are as above. When selecting a province, the corresponding city is dynamically matched. Similarly, when the city is selected, the corresponding region is dynamically matched. In this way, the effect of three-level linkage can be achieved.

The above is I compiled it for everyone, I hope it will be helpful to everyone in the future.

Related articles:

Using vue2.0.js to implement multi-level linkage selectors

Comparing times on the same day through JavaScript Size

How to use SVG in React and Vue projects

The above is the detailed content of Use mint-ui to achieve three-level linkage effects in provinces and municipalities. For more information, please follow other related articles on the PHP Chinese website!