mint-ui realizes the implementation of selecting three-level linkage

This time I will bring you the implementation of mint-ui to select three-level linkage. What are the precautions for mint-ui to select three-level linkage? The following is a practical case, let's take a look. The

project is a mobile project based on vue2 for your reference. The specific content is as follows

1. Actual effect

Address three-level linkage mint-ui picker.png

2. First, you need to download a data containing Chinese provinces, cities, districts and counties

as follows :

(This address contains second-level linkage data, third-level linkage data, fourth-level linkage data, etc., find what you need)
(A better Chinese region data, it is recommended to use this)

3. The specific code

mainly uses the picker component of mint-ui. For the use of mint-ui, please refer to the official website

Ⅰ, html component

<p>
 <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
 <p>地址3级联动：{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>
</p>

Ⅱ, component method

<script>
 import { Picker } from 'mint-ui';
 import myaddress from '../../../static/address3.json' //引入省市区数据
 export default {
 name: '',
 components: {
  'mt-picker': Picker
 },
 props: {},
 data () {
  return {
  myAddressSlots: [
   {
   flex: 1,
   defaultIndex: 1, 
   values: Object.keys(myaddress), //省份数组
   className: 'slot1',
   textAlign: 'center'
   }, {
   pider: true,
   content: '-',
   className: 'slot2'
   }, {
   flex: 1,
   values: [],
   className: 'slot3',
   textAlign: 'center'
   },
   {
   pider: true,
   content: '-',
   className: 'slot4'
   },
   {
   flex: 1,
   values: [],
   className: 'slot5',
   textAlign: 'center'
   }
  ],
  myAddressProvince:'省',
  myAddressCity:'市',
  myAddresscounty:'区/县',
  }
 },
 created() {
 },
 methods: {
  onMyAddressChange(picker, values) {
  if(myaddress[values[0]]){ //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
   picker.setSlotValues(1,Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
   picker.setSlotValues(2,myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
   this.myAddressProvince = values[0];
   this.myAddressCity = values[1];
   this.myAddresscounty = values[2];
  }
  },
 },
 mounted(){
  this.$nextTick(() => { //vue里面全部加载好了再执行的函数 （类似于setTimeout）
  this.myAddressSlots[0].defaultIndex = 0 
  // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
  //因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
  });
 }
 }
</script>

Refer to the article vue mint-ui to realize the 4-level linkage of provincial and municipal streets (the four-level linkage of mint-ui picker)

I believe I have read it You have mastered the method in the case of this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of mint-ui in vue

Tips for using the swiper plug-in in vue

What JS code specifications has Google released

The above is the detailed content of mint-ui realizes the implementation of selecting three-level linkage. For more information, please follow other related articles on the PHP Chinese website!