Vue realizes three-level linkage

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

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, and fourth-level linkage data. Data, etc., find what you need)
(a better data in China, it is recommended to use this)

3. The specific code

is mainly used The picker component of mint-ui, for the use of mint-ui, please refer to the official website

Ⅰ, html component

<p>
 <mt-picker></mt-picker>
 </p><p>地址3级联动：{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>

Ⅱ, component method

<script>
 import { Picker } from &#39;mint-ui&#39;;
 import myaddress from &#39;../../../static/address3.json&#39; //引入省市区数据
 export default {
 name: &#39;&#39;,
 components: {
  &#39;mt-picker&#39;: Picker
 },
 props: {},
 data () {
  return {
  myAddressSlots: [
   {
   flex: 1,
   defaultIndex: 1, 
   values: Object.keys(myaddress), //省份数组
   className: &#39;slot1&#39;,
   textAlign: &#39;center&#39;
   }, {
   pider: true,
   content: &#39;-&#39;,
   className: &#39;slot2&#39;
   }, {
   flex: 1,
   values: [],
   className: &#39;slot3&#39;,
   textAlign: &#39;center&#39;
   },
   {
   pider: true,
   content: &#39;-&#39;,
   className: &#39;slot4&#39;
   },
   {
   flex: 1,
   values: [],
   className: &#39;slot5&#39;,
   textAlign: &#39;center&#39;
   }
  ],
  myAddressProvince:&#39;省&#39;,
  myAddressCity:&#39;市&#39;,
  myAddresscounty:&#39;区/县&#39;,
  }
 },
 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>

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

Recommended reading:

Mint-ui usage steps detailed explanation

What are the properties of JS to determine whether there is a scroll bar on the page?

Instructions for using the loader mechanism in webpack source code

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