Bagaimana untuk melaksanakan menu pautan berbilang peringkat dalam Vue?

Vue.js ialah rangka kerja bahagian hadapan yang popular dan banyak tapak web menggunakan Vue.js untuk membangunkan UI interaktif. Satu komponen UI biasa ialah menu lata berbilang peringkat (juga dikenali sebagai pemilih lata), yang membolehkan pengguna memilih satu pilihan untuk menapis senarai pilihan lain, membenarkan carian atau keupayaan navigasi yang lebih terperinci. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue.js untuk melaksanakan menu pautan berbilang peringkat.

1. Persediaan

Sebelum kita mula, kita perlu pastikan kita telah memasang Vue.js. Ia boleh dipasang menggunakan npm atau CDN rasmi Vue.js. Katakan kita sudah mempunyai aplikasi Vue.js dan kini perlu menambah komponen menu pautan berbilang peringkat.

2. Buat komponen menu pautan berbilang peringkat

Kami akan mencipta komponen fail tunggal CascadingMenu.vue untuk melaksanakan menu pautan berbilang peringkat yang mudah. Dalam templat komponen, kami akan menggunakan arahan v-for Vue.js untuk memaparkan senarai setiap pilihan dan model v untuk mengikat nilai pilihan kepada nilai yang dipilih pengguna. Apabila pengguna memilih pilihan, kami perlu mengemas kini senarai pilihan submenu dan memaparkannya.

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

Kini kami telah mencipta komponen menu pautan berbilang peringkat mudah yang boleh memaparkan setiap pilihan dan mengikat nilai yang dipilih oleh pengguna kepada SelectOption.

3. Tambah data

Sebelum melaksanakan menu pautan berbilang peringkat, kami perlu menyediakan beberapa data untuk mensimulasikan pilihan yang boleh dipilih oleh pengguna. Kita boleh menggunakan tatasusunan mudah objek untuk mewakili setiap pilihan dan submenunya seperti yang ditunjukkan di bawah.

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: [] }]
            }
          ]
        }
      ]
    };
  }

Antaranya, setiap pilihan mempunyai atribut label dan atribut kanak-kanak mewakili pilihan submenu (jika wujud).

4. Melaksanakan menu pautan berbilang peringkat

Kami telah mencipta komponen menu pautan berbilang peringkat dan menyediakan data, kini kami perlu menggabungkannya dan menggunakan komponen rekursif untuk melaksanakan menu pautan berbilang peringkat. Kami boleh memasukkan komponen menu cascading dalam fail App.vue dan menghantar data pilihan kepadanya sebagai prop. Di dalam komponen menu cascading, kami akan memaparkan semua submenu dengan memanggil dirinya secara rekursif untuk mencapai menu pautan berbilang peringkat.

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

Kini kami telah melaksanakan menu pautan pelbagai peringkat yang mudah, pengguna boleh mengklik pada salah satu pilihan untuk memaparkan submenunya. Untuk setiap submenu, kita boleh memaparkan pilihan untuk semua submenu dengan memanggil komponen menu cascading secara rekursif.

5. Ringkasan

Dalam artikel ini, kami mempelajari cara menggunakan Vue.js untuk melaksanakan menu pautan berbilang peringkat. Kami mencipta komponen menu lata yang mudah dan menggunakan panggilan rekursif kepada dirinya sendiri untuk melaksanakan menu lata berbilang peringkat. Dengan menyediakan dan bekerja dengan data, kami menunjukkan cara untuk menjadikan setiap pilihan dan memanfaatkan model v untuk mengikat nilai pilihan kepada nilai yang dipilih pengguna. Kami berharap artikel ini membantu anda lebih memahami penggunaan Vue.js dan mencipta komponen UI yang lebih berkuasa.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan menu pautan berbilang peringkat dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!