Maison > interface Web > js tutoriel > mint-ui implémente la mise en œuvre de la sélection de liens à trois niveaux

mint-ui implémente la mise en œuvre de la sélection de liens à trois niveaux

php中世界最好的语言
Libérer: 2018-04-08 10:46:40
original
2191 Les gens l'ont consulté

Cette fois, je vais vous présenter l'implémentation de mint-ui pour sélectionner une liaison à trois niveaux. Quelles sont les précautions pour que mint-ui sélectionne une liaison à trois niveaux. jetez un oeil.

Le projet est un projet mobile basé sur vue2 pour votre référence. Le contenu spécifique est le suivant

1 Effet réel

.

Lien d'adresse à 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, des données de liaison de quatrième niveau, etc. Trouvez ce dont vous avez besoin)
(De meilleures données de région chinoise, il est recommandé de l'utiliser)

3. Le code spécifique

utilise principalement le composant picker de mint-ui. Pour l'utilisation de mint-ui, veuillez vous référer à. le site officiel

Ⅰ et composant html

<p>
 <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
 <p>地址3级联动:{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>
</p>
Copier après la connexion
Ⅱ, méthode du composant

<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>
Copier après la connexion
Référez-vous à l'article vue mint-ui pour réaliser une liaison à 4 niveaux de rues provinciales et municipales (liaison à quatre niveaux du sélecteur mint-ui)

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

Lecture recommandée :

Explication détaillée de l'utilisation de mint-ui dans vue

Conseils pour utiliser le plug swiper -in in vue

Quelles spécifications du code JS Google a-t-il publiées ?

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal