Bagaimana untuk menyelesaikan masalah bahawa pemilihan songsang tidak boleh ditetapkan untuk el-tree-select dalam Vue3?

Persekitaran: Vue3.2, Element Plus

Masalah: tetapan sub-komponen.vue => Dialog komponen pop timbul => Komponen pemilihan pokok el-tree-select, pilihan lalai tidak boleh ditetapkan default- checked-keys

Senario: Pada halaman senarai sistem hujung belakang, pilih satu baris data, klik butang tetapan dan tetapkan beberapa fungsi. Pendekatan di sini adalah untuk merangkum halaman tetapan dalam sub-komponen, dan menggunakan komponen Dialog Element Plus

dalam sub-komponen Kemudian terdapat el-tree-select dalam Dialog yang perlu dimulakan dan ditetapkan, kerana sebelum peruntukan , ia mungkin telah diperuntukkan sebelum ini, dan anda perlu menetapkan pilihan songsang

Pada mulanya, ia ditulis secara langsung, seperti berikut:

<template>
  <el-tree-select

　 :data=" store().UserMenus"

:default-expanded-keys="['xxxxxxxx']" 
  />
</template>

　 Kemudian saya dapati Ia tidak berkuat kuasa. Anda boleh meneka sebabnya pada hari Jumaat. Nilai dalam keadaan global pinia yang terikat oleh data mungkin tidak dimuatkan apabila komponen itu dibuat instantiated , jadi ia tidak boleh ditemui apabila kekunci yang dikembangkan lalai ditetapkan, selepas komponen dibuat, data tersebut akan mempunyai nilai, tetapi kekunci yang dikembangkan lalai tidak akan ditetapkan semula, menyebabkan komponen itu mengalami kejatuhan. -down data, tetapi tidak akan ada kesan pemilihan songsang.

Pada mulanya, saya fikir ia adalah masalah mudah, jadi saya memikirkannya Memandangkan ia berkaitan dengan pesanan, saya secara semula jadi menganggap kitaran hayat, jadi saya menambah onMounted ke setting.vue dan menetapkan semula nilainya. di sini:

// script ts
const list = ref()
const selectArr = ref([])
onMounted(() => {
　　list.value = store().UserMenus
　　selectArr.value = ['xxxxxxxx']
})
 
// setting.vue
<template>
  <el-tree-select 
　　　 :data="list"
    :default-expanded-keys="selectArr" 
  />

Data terikat pada pembolehubah senarai, dan kekunci kembangan lalai terikat pada selectArr. Saya fikir ia OK, tetapi akhirnya, pilihan raya balas tidak berjaya. Cuma... keterlaluan~

Lazimnya, fungsi onMounted telah menyelesaikan penciptaan komponen dan mencipta Dom Pada masa ini, saya sepatutnya dapat menetapkan nilai senarai dan kemudian menetapkan selectArr. Tetapi sebenarnya pilihan raya balas masih tidak berjaya.

Ini menunjukkan bahawa masih terdapat masalah dengan pemuatan Dengan mentaliti penyelidikan, saya boleh menetapkan nilai lalainya dengan memanggil API el-tree-select, iaitu kaedah setCheckedKeys !

Melalui rujukan templat, dapatkan el-tree-select, namakan pokok, dan kemudian kembali ke onMounted untuk mencetak: console.log(tree.value), lelaki yang baik, ia tidak ditentukan, yang menunjukkan bahawa dalam tetapan . Vue's onMounted tidak boleh menetapkan kekunci yang dipilih sama sekali. Kemudian perkara yang pelik ialah apabila saya berulang kali mengubah suai kod, disebabkan muat semula panas, halaman Vue akan dikemas kini dengan sewajarnya, dan ia sebenarnya telah dipilih! Tetapi sebaik sahaja saya menyegarkan, pilihan songsang serta-merta menjadi tidak sah. enmmmm ..... Saya pada asasnya boleh mencari masalah OnMounted tidak boleh mendapatkan komponen Saya cuba onUnmounted kemudian dan mendapati ia berfungsi, tetapi ini adalah logik permulaan saya dan adalah mustahil untuk menulisnya dalam onUnmounted.

Terdapat satu lagi faktor yang menyebabkan masalah ini, iaitu, Dialog tidak dipaparkan secara lalai. Paparan dan penyembunyian dikawal melalui pembolehubah terikat kepada v-model="dialogVisible". yang juga menyebabkan kegagalan. Satu sebab ialah jika saya mula-mula menetapkan dialogVisible.value = benar, maka menyongsangkan pemilihan adalah OK, tetapi saya masih tidak boleh menetapkannya kepada benar, jadi tiada tetingkap pop timbul dipaparkan pada mulanya.

Pada dasarnya saya terperangkap di tempat ini pada petang Jumaat Selepas berehat pada hujung minggu (Canyon Timi), saya menyemaknya semasa dalam perjalanan ke tempat kerja pada pagi Isnin dan mempertimbangkan untuk mencari jawapan daripada Dialog itu sendiri. seperti yang dijangkakan, APInya Terdapat kaedah yang dibuka, Dialog membuka panggilan balik apabila animasi tamat, saya melakukan pemulaan di sini, dan masalah telah diselesaikan:

// Dialog
@opened="opened"

// script ts 
const opened = () => {
     selectArr.value = ['xxxxxxxx']
}

Satu lagi sebab mengapa saya dapat mencari idea ini. bahawa saya juga mencuba borang Objek borang sentiasa boleh diperolehi dalam acara penyerahan borang sebelum ini, dan kemudian saya cuba melihat sama ada ia boleh diperolehi dalam onMounted, dan hasilnya adalah serupa. Letakkan butang, dan anda boleh mendapatkan komponen dalam acara klik butang, kerana pada masa anda mengklik butang, semua pada halaman telah dimuatkan Begitu juga, dalam panggilan balik apabila animasi pembukaan Dialog tamat, halaman mesti telah dimuatkan lebih awal Memandangkan semua nilai hadir, tidak akan ada masalah tidak dapat mencari kunci semasa pemulaan pada masa ini.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah bahawa pemilihan songsang tidak boleh ditetapkan untuk el-tree-select dalam Vue3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!