Titik teras untuk melumpuhkan pilihan untuk kotak drop-down VUE dan Element-UI: Gunakan sifat dilumpuhkan atribut pilihan untuk melumpuhkan satu pilihan. Secara dinamik menjana pilihan pilihan berdasarkan data backend atau operasi pengguna, termasuk maklumat melumpuhkan. Elakkan secara langsung mengubah suai pilihan, tetapi buat array baru dan pengubahsuaian salin. Gunakan sifat yang dikira untuk mengemas kini pilihan pilihan secara dinamik untuk mencapai kemas kini responsif. Sesuaikan Lumpuhkan Logik dan mengoptimumkan algoritma dan kebolehbacaan.

Vue dan Element-UI Cascade Drop-Down Box Lumpur Pilihan: Pembangunan yang kurang upaya, yang cekap

Ramai rakan akan menghadapi situasi di mana mereka perlu melumpuhkan pilihan tertentu dalam pemilih cascading apabila menggunakan VUE dan Element-UI untuk melakukan projek. Ini mungkin kelihatan mudah, tetapi tidak ditangani dengan baik, dan kod itu boleh menjadi verbose dan sukar untuk dijaga. Artikel ini akan meneroka isu ini secara mendalam dan berkongsi beberapa penyelesaian yang cekap dan elegan, serta beberapa perangkap yang saya telah melanda. Selepas membaca artikel ini, anda akan dapat dengan mudah berurusan dengan pelbagai pemilih Cascading Lumpuhkan senario dan menulis lebih banyak kod ringkas dan lebih cekap.

Mari kita mulakan dengan asas -asas. Pemilih Cascade Element-UI el-cascader tidak menyokong secara langsung melumpuhkan satu pilihan. Ia menyediakan melumpuhkan keseluruhan komponen, atau melumpuhkan keseluruhan hierarki. Oleh itu, kita memerlukan beberapa cara untuk melaksanakan melumpuhkan satu pilihan.

Inti terletak pada cara untuk menggunakan atribut options el-cascader . Harta ini menerima array, setiap objek dalam array mewakili pilihan, dan boleh mengandungi harta disabled untuk mengawal sama ada ia dilumpuhkan. Kuncinya ialah cara untuk menghasilkan array options secara dinamik supaya ia mengandungi maklumat yang disable.

Mari kita lihat contoh mudah, anggap struktur data kita seperti ini:

 <code class="javascript">const options = [ { value: '1', label: '選項(xiàng)1', children: [ { value: '11', label: '選項(xiàng)1-1', disabled: true }, { value: '12', label: '選項(xiàng)1-2' } ] }, { value: '2', label: '選項(xiàng)2', children: [ { value: '21', label: '選項(xiàng)2-1' }, { value: '22', label: '選項(xiàng)2-2', disabled: true } ] } ];</code>

Dalam contoh ini,選項(xiàng)1-1 dan選項(xiàng)2-2 dilumpuhkan. Hanya berikan options kepada atribut options el-cascader .

Ini seolah -olah mudah, tetapi dalam aplikasi sebenar, data anda mungkin datang dari antara muka backend, atau keadaan kurang upaya perlu diubah secara dinamik mengikut operasi pengguna. Pada masa ini, anda memerlukan kaedah untuk menghasilkan array options secara dinamik dan mengemas kini apabila data berubah.

Saya telah cuba mengubahsuai harta disabled secara langsung pada pelbagai options , tetapi mendapati bahawa ini menyebabkan sistem responsif Vue tidak mengemas kini UI dengan betul. Cara yang betul untuk melakukan ini adalah untuk membuat pelbagai options baru dan menyalin data yang diubah suai ke dalam array baru.

Berikut adalah penyelesaian yang lebih mantap yang mengambil kesempatan daripada sifat -sifat yang dikira oleh Vue:

 <code class="javascript"><template> <el-cascader v-model="selectedOptions" :options="cascaderOptions"></el-cascader> </template> <script> export default { data() { return { originalOptions: [ /* 從后端獲取的原始數(shù)據(jù)*/ ], selectedOptions: [], }; }, computed: { cascaderOptions() { // 這里進(jìn)行options的動(dòng)態(tài)生成和禁用處理return this.processOptions(this.originalOptions); } }, methods: { processOptions(options) { // 遞歸處理options，根據(jù)你的邏輯設(shè)置disabled屬性return options.map(option => ({ ...option, children: option.children ? this.processOptions(option.children) : [], disabled: this.shouldDisable(option) // 自定義禁用邏輯})); }, shouldDisable(option) { // 這里編寫(xiě)你的禁用邏輯，例如根據(jù)option.value判斷是否禁用return option.value === &#39;11&#39; || option.value === &#39;22&#39;; }, handleChange(value) { // 處理選中值變化console.log(value); } } }; </script></code>

Skim ini menggunakan cascaderOptions harta yang dikira, yang secara dinamik akan menghasilkan pelbagai options yang mengandungi maklumat melumpuhkan berdasarkan originalOptions . Fungsi processOptions memproses data secara rekursif, dan fungsi shouldDisable mentakrifkan logik disable, yang anda boleh mengubah suai mengikut keperluan sebenar.

Ingat, pengoptimuman prestasi adalah penting. Jika jumlah data anda besar, pemprosesan rekursif boleh menjejaskan prestasi. Pada ketika ini, anda boleh mempertimbangkan menggunakan algoritma yang lebih cekap, seperti lelaran dan bukannya rekursi.

Akhirnya, kebolehbacaan dan penyelenggaraan kod adalah sama pentingnya. Gunakan nama dan komen yang jelas untuk menjadikan kod anda lebih mudah difahami dan diselenggara. Elakkan lebihan dan pilih penyelesaian yang paling mudah dan paling berkesan. Ingat, kod elegan lebih baik daripada kod kompleks.

Atas ialah kandungan terperinci Vue dan Element-UI Cascade Drop-Down Box Lumpuhkan Pilihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!