Comment implémenter un menu de liaison à plusieurs niveaux dans Vue ?

Vue.js est un framework frontal populaire et de nombreux sites Web utilisent Vue.js pour développer des interfaces utilisateur interactives. Un composant courant de l'interface utilisateur est un menu en cascade à plusieurs niveaux (également appelé sélecteur en cascade), qui permet aux utilisateurs de sélectionner une option pour filtrer la liste d'une autre option, permettant ainsi des capacités de recherche ou de navigation plus granulaires. Dans cet article, nous présenterons comment utiliser Vue.js pour implémenter un menu de liaison à plusieurs niveaux.

1. Préparation

Avant de commencer, nous devons nous assurer que Vue.js est installé. Il peut être installé à l’aide de npm ou du CDN officiel de Vue.js. Supposons que nous ayons déjà une application Vue.js et que nous devions maintenant ajouter un composant de menu de liaison à plusieurs niveaux.

2. Créer un composant de menu de liaison à plusieurs niveaux

Nous allons créer un composant de fichier unique CascadingMenu.vue pour implémenter un simple menu de liaison à plusieurs niveaux. Dans le modèle du composant, nous utiliserons la directive v-for de Vue.js pour afficher la liste de chaque option, et v-model pour lier la valeur de l'option à la valeur sélectionnée par l'utilisateur. Lorsque l'utilisateur sélectionne une option, nous devons mettre à jour la liste d'options du sous-menu et l'afficher.

<template>
  <div class="cascading-menu">
    <select v-model="selectedOption">
      <option value="">请选择</option>
      <option v-for="option in options" :value="option">{{ option.label }}</option>
    </select>
    <cascading-menu v-if="hasChildren" :options="selectedOption.children" />
  </div>
</template>

<script>
export default {
  name: 'CascadingMenu',
  props: {
    options: {
      type: Array,
      default: () => [],
      required: true
    },
    selectedValue: {
      default: null,
      required: false
    }
  },
  data() {
    return {
      selectedOption: this.selectedValue,
      hasChildren: false
    };
  },
  watch: {
    selectedOption() {
      this.hasChildren = this.selectedOption.children.length > 0;
    }
  }
};
</script>

Nous avons maintenant créé un simple composant de menu de liaison à plusieurs niveaux qui peut afficher chaque option et lier la valeur sélectionnée par l'utilisateur à selectedOption.

3. Ajouter des données

Avant de mettre en œuvre le menu de liaison à plusieurs niveaux, nous devons préparer certaines données pour simuler les options que l'utilisateur peut choisir. Nous pouvons utiliser un simple tableau d'objets pour représenter chaque option et leur sous-menu, comme indiqué ci-dessous.

data() {
    return {
      options: [
        {
          label: '选项1',
          children: [
            {
              label: '选项1-1',
              children: [
                { label: '选项1-1-1', children: [] },
                { label: '选项1-1-2', children: [] },
                { label: '选项1-1-3', children: [] }
              ]
            },
            {
              label: '选项1-2',
              children: [{ label: '选项1-2-1', children: [] }]
            }
          ]
        },
        {
          label: '选项2',
          children: [
            {
              label: '选项2-1',
              children: [
                { label: '选项2-1-1', children: [] },
                { label: '选项2-1-2', children: [] },
                { label: '选项2-1-3', children: [] }
              ]
            },
            {
              label: '选项2-2',
              children: [{ label: '选项2-2-1', children: [] }]
            }
          ]
        }
      ]
    };
  }

Parmi eux, chaque option possède un attribut label et un attribut children. L'attribut children représente l'option du sous-menu (s'il existe).

4. Implémentation du menu de liaison multi-niveaux

Nous avons créé un composant de menu de liaison multi-niveaux et préparé les données, nous devons maintenant les combiner et utiliser des composants récursifs pour implémenter le menu de liaison multi-niveaux. Nous pouvons inclure le composant de menu en cascade dans le fichier App.vue et lui transmettre les données d'options en tant qu'accessoires. À l'intérieur du composant menu en cascade, nous afficherons tous les sous-menus en s'appelant récursivement pour obtenir un menu de liaison à plusieurs niveaux.

<template>
  <div class="app">
    <cascading-menu :options="options" />
  </div>
</template>

<script>
import CascadingMenu from './components/CascadingMenu';

export default {
  name: 'App',
  components: {
    CascadingMenu
  },
  data() {
    return {
      options: [
        {
          label: '选项1',
          children: [
            {
              label: '选项1-1',
              children: [
                { label: '选项1-1-1', children: [] },
                { label: '选项1-1-2', children: [] },
                { label: '选项1-1-3', children: [] }
              ]
            },
            {
              label: '选项1-2',
              children: [{ label: '选项1-2-1', children: [] }]
            }
          ]
        },
        {
          label: '选项2',
          children: [
            {
              label: '选项2-1',
              children: [
                { label: '选项2-1-1', children: [] },
                { label: '选项2-1-2', children: [] },
                { label: '选项2-1-3', children: [] }
              ]
            },
            {
              label: '选项2-2',
              children: [{ label: '选项2-2-1', children: [] }]
            }
          ]
        }
      ]
    };
  }
};
</script>

Maintenant, nous avons implémenté un menu de liaison simple à plusieurs niveaux, l'utilisateur peut cliquer sur l'une des options pour afficher son sous-menu. Pour chaque sous-menu, nous pouvons afficher les options de tous les sous-menus en appelant récursivement le composant cascading-menu.

5. Résumé

Dans cet article, nous avons appris à utiliser Vue.js pour implémenter un menu de liaison à plusieurs niveaux. Nous avons créé un simple composant de menu en cascade et utilisé des appels récursifs vers lui-même pour implémenter des menus en cascade à plusieurs niveaux. En préparant et en travaillant avec les données, nous montrons comment restituer chaque option et exploiter le modèle v pour lier la valeur de l'option à la valeur sélectionnée par l'utilisateur. Nous espérons que cet article vous aidera à mieux comprendre l'utilisation de Vue.js et à créer des composants d'interface utilisateur plus puissants.

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!