Comment résoudre le problème selon lequel la sélection inverse ne peut pas être définie pour el-tree-select dans Vue3 ?

　Environnement : Vue3.2, Element Plus

　Problème : paramètre de sous-composant.vue => Composant contextuel Dialog => Composant de sélection d'arborescence el-tree-select, l'élément sélectionné par défaut ne peut pas être défini par défaut-checked-keys

　 Scénario : Sur une page de liste du système backend, sélectionnez une ligne de données, cliquez sur le bouton de configuration et attribuez certaines fonctions. L'approche ici consiste à encapsuler la page de configuration dans un sous-composant et à utiliser le composant Dialog d'Element Plus dans le sous-composant

                                                                                                    ' ' s el's ' ' s ' s ' s el-tree's ' ' el-tree-s-t-s-t-o-c t t t doit être initialisé, car avant allocation, il peut être alloué avant. Cependant, vous devez mettre en place la sélection inverse

　Au début, c'était écrit directement, comme suit :

<template>
  <el-tree-select

　　 :data=" store().UserMenus"

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

　 Ensuite, j'ai découvert que cela ne prenait pas effet. J'ai pu deviner la raison vendredi, la liaison de données La valeur dans l'état global pinia. Cette valeur n'a peut-être pas été chargée lorsque le composant est instancié, Ainsi, lorsque les clés étendues par défaut sont définies, il ne peut pas trouver les données du nœud. Une fois le composant créé, les données ont une valeur, mais les clés étendues par défaut ne seront pas réinitialisées, ce qui entraînera la liste déroulante du composant. données, mais il n’y aura pas d’effet de sélection inverse.

Au début, je pensais que c'était un problème simple, alors j'y ai réfléchi puisqu'il est lié à la commande, j'ai naturellement pris en compte le cycle de vie, j'ai donc ajouté onMounted à settings.vue et je l'ai réaffecté ici :

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

.

　 Liste de liaison de données Variable, les touches étendues par défaut lie selectArr. Eh bien, je pensais que tout allait bien, mais en fin de compte, la contre-élection n’a pas abouti. Juste... scandaleux ~

Normalement, la fonction onMounted a déjà terminé la création du composant et créé le Dom. À ce stade, je devrais pouvoir définir la valeur de la liste, puis définir le selectArr. Mais en réalité, la contre-élection n’a toujours pas abouti.

　Cela montre qu'il y a toujours un problème de chargement. Avec une mentalité de recherche, j'ai pensé à une autre méthode, je peux définir sa valeur par défaut en appelant l'API d'el-tree-select, qui est la méthode setCheckedKeys !

　 Grâce à la référence du modèle, obtenez el-tree-select, nommez-le tree, puis revenez à onMounted pour imprimer : console.log(tree.value), bon gars, ce n'est pas défini, ce qui montre que onMounted dans settings.vue est pas du tout Les touches sélectionnées ne peuvent pas être définies. Ensuite, ce qui est étrange, c'est que lorsque je modifiais le code à plusieurs reprises, en raison d'un rechargement à chaud, la page Vue était mise à jour en conséquence, et elle était en fait sélectionnée ! Mais dès que j'ai actualisé, la sélection inverse est immédiatement devenue invalide. enmmmm ..... En gros, je peux localiser le problème. OnMounted ne peut pas obtenir le composant. J'ai essayé onUnmount plus tard et j'ai découvert que cela fonctionnait, mais c'est ma logique d'initialisation et il est impossible de l'écrire dans onUnmount.

Il y a un autre facteur qui provoque ce problème, c'est-à-dire que la boîte de dialogue n'est pas affichée par défaut. L'affichage et le masquage sont contrôlés via les variables liées à v-model="dialogVisible". raison de l'échec, par exemple, j'ai initialement défini dialogVisible.value = true, donc la sélection inverse est OK, mais je ne peux toujours pas la définir sur true, donc aucune fenêtre contextuelle n'est affichée au début.

J'étais essentiellement coincé dans cet endroit vendredi après-midi. Après m'être reposé pendant le week-end (Canyon Timi), je l'ai revu sur le chemin du travail lundi matin et j'ai envisagé de chercher la réponse dans Dialog lui-même. Hé, comme prévu, là-bas. est un open dans sa méthode API, Dialog ouvre le rappel lorsque l'animation se termine. Je fais l'initialisation ici et le problème est résolu :

// Dialog
@opened="opened"

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

Une autre raison pour laquelle je peux trouver cette idée est que j'ai aussi essayé le formulaire. Cela a été possible lors de l'événement de soumission du formulaire auparavant. J'ai obtenu l'objet du formulaire, puis j'ai essayé de voir s'il pouvait être obtenu dans onMounted. Le résultat était similaire. Mettez un bouton et vous pourrez obtenir le composant en cas de clic du bouton, car au moment où vous cliquez sur le bouton, tout sur la page a été chargé. De même, dans le rappel lorsque l'animation d'ouverture du dialogue se termine, la page doit être chargée. ont été chargés tôt. Maintenant que toutes les valeurs sont présentes, il n'y aura plus de problème de ne pas pouvoir trouver la clé lors de l'initialisation à ce moment.

// Dialog
@opened="opened"

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!