Wie kann das Problem gelöst werden, dass in Vue3 keine inverse Auswahl für el-tree-select festgelegt werden kann?

Umgebung: Vue3.2, Element Plus

Problem: Unterkomponente Setting.vue => Baumauswahlkomponente el-tree-select, kann nicht festgelegt werden Standardauswahlelement default-checked-keys

Szenario: Wählen Sie auf der Listenseite eines Hintergrundsystems eine Datenzeile aus, klicken Sie auf die Einstellungsschaltfläche und weisen Sie einige Funktionen zu. Der Ansatz hier besteht darin, die Einstellungsseite in einer Unterkomponente zu kapseln und die Dialogkomponente

von Element Plus in der Unterkomponente zu verwenden. Dann gibt es eine El-Tree-Auswahl im Dialog, die erforderlich ist initialisiert und zugewiesen werden, da es in der Vorzuweisung möglicherweise bereits zuvor zugewiesen wurde. Sie müssen die umgekehrte Auswahl festlegen

Zuerst wird es direkt wie folgt geschrieben:

<template>
  <el-tree-select

# 🎜🎜# :data="store().UserMenus"#🎜🎜 #

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

Dann stellte ich fest, dass es am Freitag nicht wirksam wurde. Der Wert im Pinia-Globalzustand war an die Daten gebunden Wurde möglicherweise nicht geladen, als die Komponente instanziiert wurde, sodass „default-expanded-keys“ festgelegt wurde. Nachdem die Komponente erstellt wurde, haben die Daten keinen Wert erneut zurückgesetzt, wodurch die Komponente über Dropdown-Daten verfügt, jedoch kein umgekehrter Auswahleffekt auftritt.

Zuerst dachte ich, es sei ein einfaches Problem, also habe ich mein Gehirn benutzt. Da es mit der Bestellung zusammenhängt, ist es natürlich, den Lebenszyklus zu berücksichtigen, also habe ich onMounted zu Setting.vue hinzugefügt und den Wert hier neu zugewiesen: #🎜 🎜#

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

Daten sind an die Variablenliste gebunden, und default-expanded-keys ist an selectArr gebunden. Naja, ich fand es ok, aber am Ende war die Gegenwahl kein Erfolg. Das ist unverschämt~

Normalerweise hat die onMounted-Funktion die Komponentenerstellung abgeschlossen und den Dom erstellt. Zu diesem Zeitpunkt sollte ich in der Lage sein, den Wert der Liste festzulegen und dann den selectArr festzulegen. Doch tatsächlich war die Gegenwahl noch immer nicht erfolgreich.

Dies zeigt, dass es immer noch ein Problem beim Laden gibt. Ich habe mir eine andere Methode ausgedacht, indem ich die API von el-tree-select aufrufe Verfahren!

Holen Sie sich über die Vorlagenreferenz el-tree-select, benennen Sie es „tree“ und kehren Sie dann zu onMounted zurück, um Folgendes zu drucken: console.log(tree.value), guter Kerl, es ist undefiniert, was das zeigt im onMounted von Setting.vue können die ausgewählten Schlüssel überhaupt nicht festgelegt werden. Das Seltsame ist dann, dass die Vue-Seite entsprechend aktualisiert wurde, wenn ich den Code aufgrund des Hot-Reloads wiederholt änderte, und sie tatsächlich ausgewählt wurde! Aber sobald ich mich aktualisierte, wurde die umgekehrte Auswahl sofort ungültig. enmmmm ..... Ich kann das Problem im Grunde nicht finden. Ich habe es später mit onUnmount versucht und festgestellt, dass es funktioniert, aber das ist meine Initialisierungslogik und es ist unmöglich, es in onUnmount zu schreiben.

Es gibt einen weiteren Faktor, der dieses Problem verursacht: Der Dialog wird standardmäßig nicht angezeigt. Die Anzeige und das Ausblenden werden über die an v-model="dialogVisible" gebundenen Variablen gesteuert false. Ein Grund für den Fehler ist, dass, wenn ich anfänglich dialogVisible.value = true setze, die inverse Auswahl in Ordnung ist, ich sie aber immer noch nicht auf true setzen kann, sodass am Anfang kein Popup-Fenster angezeigt wird.

Ich saß am Freitagnachmittag im Grunde an diesem Ort fest, nachdem ich mich über das Wochenende entspannt hatte (Canyon Timi), und überprüfte es am Montagmorgen auf dem Weg zur Arbeit und überlegte, nach der Antwort von Dialog selbst zu suchen. Hey, wie erwartet gibt es eine geöffnete Methode in der API. Dialog öffnet den Rückruf, wenn die Animation endet. Ich führe die Initialisierung hier durch und das Problem ist gelöst:

// Dialog
@opened="opened"

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

Ein weiterer Grund, warum ich kann Ich habe diese Idee auch ausprobiert und festgestellt, dass das Formularobjekt immer im Submit-Ereignis des Formulars abgerufen werden konnte. Das Ergebnis war ähnlich. Wenn Sie eine Schaltfläche einfügen, können Sie die Komponente im Klickereignis der Schaltfläche abrufen, da zum Zeitpunkt des Klickens auf die Schaltfläche alles auf der Seite geladen wurde. Ebenso muss die Seite im Rückruf geladen werden, wenn die Animation zum Öffnen des Dialogs endet Da nun alle Werte vorhanden sind, besteht zu diesem Zeitpunkt kein Problem mehr, dass der Schlüssel während der Initialisierung nicht gefunden werden kann.

// Dialog
@opened="opened"

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

Das obige ist der detaillierte Inhalt vonWie kann das Problem gelöst werden, dass in Vue3 keine inverse Auswahl für el-tree-select festgelegt werden kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!