Comment utiliser Vue et Element-UI pour implémenter la fonction de liste déroulante de liaison à plusieurs niveaux

Comment utiliser Vue et Element-UI pour implémenter la fonction de liste déroulante à plusieurs niveaux

Introduction :
Dans le développement Web, la liste déroulante de liaison à plusieurs niveaux est une méthode d'interaction courante. En sélectionnant une option dans une liste déroulante, le contenu des listes déroulantes suivantes peut être modifié de manière dynamique. Cet article expliquera comment utiliser Vue et Element-UI pour implémenter cette fonction et fournira des exemples de code.

1. Préparation
Tout d'abord, nous devons nous assurer que Vue et Element-UI ont été installés. Il peut être installé via la commande suivante :

npm install vue
npm install element-ui

2. Préparation des données
Pour implémenter des listes déroulantes de liaison multi-niveaux, nous devons préparer les données correspondantes. Supposons que nous ayons une collection de données sur les marques et les modèles de voitures. La structure des données est la suivante :

brands: [
    {
        id: 1,
        name: '奥迪',
        models: [
            {
                id: 1,
                name: 'A4'
            },
            {
                id: 2,
                name: 'A6'
            }
        ]
    },
    {
        id: 2,
        name: '宝马',
        models: [
            {
                id: 3,
                name: 'X3'
            },
            {
                id: 4,
                name: 'X5'
            }
        ]
    }
]

3. Écrivez le composant Vue
Nous pouvons créer un composant Vue nommé Cascader pour implémenter la fonction de liste déroulante de liaison multi-niveaux. Le code est le suivant :

<template>
  <div>
    <el-cascader
      :options="brands"
      v-model="selectedValues"
      @change="handleChange"
      :props="{ value: 'id', label: 'name', children: 'models' }"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      brands: [...], // 编辑为上面提到的数据结构
      selectedValues: []
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

Dans le code ci-dessus, nous utilisons le composant Cascader d'Element-UI. En définissant l'attribut options sur les marques, nous transmettons les données de la marque de la voiture à la liste déroulante. La directive v-model est utilisée pour lier dans les deux sens la valeur sélectionnée par l'utilisateur. L'événement @change peut surveiller les modifications de sélection des utilisateurs. Dans la méthode handleChange, nous pouvons gérer la valeur sélectionnée par l'utilisateur.

4. Composants de rendu
Pour restituer nos composants dans la page, nous devons introduire et enregistrer le composant Cascader dans l'instance Vue. Le code est le suivant :

import Vue from 'vue';
import Cascader from './Cascader.vue';

new Vue({
  render: (h) => h(Cascader)
}).$mount('#app');

5. Application pratique
Le code ci-dessus n'est qu'un exemple simple. Dans une application réelle, nous pouvons avoir besoin de charger dynamiquement le modèle de voiture correspondant en fonction de la marque sélectionnée par l'utilisateur. Voici le code pour un exemple complet :

<template>
  <div>
    <el-cascader
      :options="brands"
      v-model="selectedValues"
      @change="handleChange"
      :props="{ value: 'id', label: 'name', children: 'models' }"
    ></el-cascader>
    <el-cascader
      v-if="selectedValues[0]"
      :options="getBrandById(selectedValues[0]).models"
      v-model="selectedValues[1]"
      @change="handleChange"
      :props="{ value: 'id', label: 'name' }"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      brands: [...], // 编辑为上面提到的数据结构
      selectedValues: []
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    getBrandById(id) {
      return this.brands.find((brand) => brand.id === id);
    }
  }
};
</script>

Dans le code ci-dessus, nous chargeons dynamiquement le modèle de voiture correspondant en fonction de la marque sélectionnée par l'utilisateur. Lorsque l'utilisateur sélectionne une marque, la deuxième liste déroulante sera affichée en fonction de l'attribut modèles de la marque sélectionnée.

6. Résumé
Grâce à la coopération de Vue et Element-UI, nous pouvons facilement réaliser la fonction de liste déroulante de liaison multi-niveaux. Préparez d'abord les données, puis utilisez le composant Cascader pour obtenir l'effet de liaison en définissant l'attribut props et en écoutant l'événement de changement. Ce qui précède est la description détaillée et un exemple de code sur la façon d'utiliser Vue et Element-UI pour implémenter la fonction de liste déroulante de liaison multi-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!