mint-ui realizes three-level linkage case sharing

This time I will bring you a case sharing of mint-ui realizing three-level linkage. What are the precautions for mint-ui to realize 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:

What are the uses of swiper in vue

Angular HMR function implementation method (with code)

react native floating button component graphic tutorial

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