vue réalise une liaison à trois niveaux

Cette fois, je vais vous présenter Vue pour réaliser une liaison à trois niveaux. Quelles sont les précautions pour que Vue réalise une liaison à trois niveaux. Ce qui suit est un cas pratique, jetons un coup d'œil.

1. Effet réel

Adresse de liaison à trois niveaux mint-ui picker.png

2. Tout d'abord, vous devez télécharger des données contenant les provinces, villes, districts et comtés chinois

comme suit :
(Cette adresse contient des données de liaison de deuxième niveau, des données de liaison de troisième niveau , et les données de liaison de quatrième niveau. Données, etc., trouvez ce dont vous avez besoin)
(de meilleures données en Chine, il est recommandé de les utiliser)

3. 🎜>

est principalement utilisé Le composant sélecteur de mint-ui, pour l'utilisation de mint-ui, veuillez vous référer au site officiel

Ⅰ, composant html

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

Ⅱ, méthode des composants

<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>

Je crois qu'après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée des étapes d'utilisation de Mint-UI

Quels attributs JS possède-t-il pour déterminer s'il existe y a-t-il une barre de défilement sur la page ?

Instructions pour utiliser le mécanisme de chargement dans le code source du webpack

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!