Méthode de mise en œuvre de liaison à 3 niveaux de sélection de ville de Vue basée sur mint-ui

Cet article présente principalement l'exemple de la liaison de niveau 3 de sélection de ville de Vue basée sur mint-ui. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Le projet est un projet mobile basé sur vue2

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 :

https://github.com/artiely/Administrative-pisions-of-China (il 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 données de liaison, etc., trouvez ce dont vous avez besoin )

3. Le code spécifique
utilise principalement le composant picker 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 du composant

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

Recommandations associées :

Easyui réalise la fonction de sélection d'utilisateur de la liaison de niveau 3

Explication détaillée d'une ville et d'un comté faits maison deux composants de liaison dans Angular4

vue mint- ui imitation Taobao JD.com adresse de livraison liaison à quatre niveaux

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!