Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi kotak drop-down pautan berbilang peringkat

Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi kotak drop-down berbilang peringkat

Pengenalan:
Dalam pembangunan web, kotak drop-down pautan berbilang peringkat ialah kaedah interaksi yang biasa. Dengan memilih pilihan dalam kotak drop-down, kandungan kotak drop-down berikutnya boleh diubah secara dinamik. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi ini dan memberikan contoh kod.

1. Persediaan
Pertama, kita perlu memastikan bahawa Vue dan Element-UI telah dipasang. Ia boleh dipasang melalui arahan berikut:

npm install vue
npm install element-ui

2. Penyediaan data
Untuk melaksanakan kotak drop-down pautan berbilang peringkat, kita perlu menyediakan data yang sepadan. Katakan kita mempunyai koleksi data jenama kereta dan model kereta. Struktur data adalah seperti berikut:

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. Tulis komponen Vue
Kita boleh mencipta komponen Vue bernama Cascader untuk melaksanakan fungsi kotak drop-down pautan berbilang peringkat. Kodnya adalah seperti berikut:

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

Dalam kod di atas, kami menggunakan komponen Cascader Element-UI. Dengan menetapkan atribut pilihan kepada jenama, kami menghantar data jenama kereta ke kotak lungsur. Arahan model v digunakan untuk mengikat dua hala nilai yang dipilih oleh pengguna. Acara @change boleh memantau perubahan pemilihan pengguna. Dalam kaedah handleChange kita boleh mengendalikan nilai yang dipilih oleh pengguna.

4. Komponen Rendering
Untuk memaparkan komponen kami ke dalam halaman, kami perlu memperkenalkan dan mendaftarkan komponen Cascader dalam contoh Vue. Kodnya adalah seperti berikut:

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

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

5. Aplikasi Praktikal
Kod di atas hanyalah contoh mudah Dalam aplikasi sebenar, kita mungkin perlu memuatkan model kereta yang sepadan secara dinamik mengikut jenama yang dipilih oleh pengguna dan operasi lain. Berikut ialah kod untuk contoh lengkap:

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

Dalam kod di atas, kami memuatkan model kereta yang sepadan secara dinamik berdasarkan jenama yang dipilih oleh pengguna. Apabila pengguna memilih jenama, kotak lungsur kedua akan dipaparkan berdasarkan atribut model bagi jenama yang dipilih.

6. Ringkasan
Melalui kerjasama Vue dan Element-UI, kami boleh merealisasikan fungsi kotak drop-down pautan berbilang peringkat. Mula-mula sediakan data, dan kemudian gunakan komponen Cascader untuk mencapai kesan pautan dengan menetapkan atribut props dan mendengar peristiwa perubahan. Di atas ialah penerangan terperinci dan kod sampel tentang cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi kotak lungsur turun pautan berbilang peringkat.

Atas ialah kandungan terperinci Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi kotak drop-down pautan berbilang peringkat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!