How to solve the problem that inverse selection cannot be set for el-tree-select in Vue3?

Environment: Vue3.2, Element Plus

Problem: Sub-component setting.vue => Pop-up component Dialog => Tree selection component el-tree-select, the default selection cannot be set default- checked-keys

Scenario: On the list page of a background system, select a row of data, click the setting button, and assign some functions. The approach here is to encapsulate the settings page in a sub-component, and use the Dialog component of Element Plus in the sub-component

Then there is an el-tree-select in the Dialog that needs to be initialized and assigned, because before allocation , it may have been allocated before, and you need to set the inverse selection

At first, it was written directly, as follows:

<template>
  <el-tree-select

　 :data="store().UserMenus"

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

　 Then I found It does not take effect. You can guess the reason on Friday. The value in the pinia global state bound by data may not have been loaded when the component is instantiated, so it cannot be found when default-expanded-keys is set. Node data, after the component is created, the data will have a value, but the default-expanded-keys will not be reset again, causing the component to have drop-down data, but there will be no inverse selection effect.

At first, I thought it was a simple problem, so I used my brain. Since it is related to the order, I naturally considered the life cycle, so I added onMounted to setting.vue and reassigned the value here:

// 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 is bound to the list variable, and default-expanded-keys is bound to selectArr. Well, I thought it was OK, but in the end, the counter-election was not successful. Just... outrageous~

Normally speaking, the onMounted function has already completed the component creation and created the Dom. At this time, I should be able to set the value of the list and then set the selectArr. But in fact, the counter-election was still not successful.

This shows that there is still a problem with loading. With a research mentality, I thought of another method. I can set its default value by calling the API of el-tree-select, which is setCheckedKeys. method!

Through template reference, get el-tree-select, name it tree, and then return to onMounted to print: console.log(tree.value), good guy, it is undefined, which shows that in setting. Vue's onMounted cannot set the selected keys at all. Then the strange thing is that when I repeatedly modified the code, due to hot reloading, the Vue page would be updated accordingly, and it was actually selected! But as soon as I refreshed, the inverse selection immediately became invalid. enmmmm ..... I can basically locate the problem. OnMounted cannot obtain the component. I tried onUnmounted later and found that it works, but this is my initialization logic and it is impossible to write it in onUnmounted.

There is another factor that causes this problem, that is, Dialog is not displayed by default. The display and hiding are controlled through the variables bound to v-model="dialogVisible". The initialization value is false, which also causes failure. One reason is that if I initially set dialogVisible.value = true, then inverting the selection is OK, but I still cannot set it to true, so there is no pop-up window displayed at the beginning.

I was basically stuck in this place on Friday afternoon. After relaxing over the weekend (Canyon Timi), I reviewed it on the way to work on Monday morning and considered looking for the answer from Dialog itself. Hey, as expected, its API There is an opened method, the callback when the Dialog opens the animation. I did the initialization here, and the problem was solved:

// Dialog
@opened="opened"

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

Another reason why I was able to find this idea is that I also tried the form. The form object could always be obtained in the submit event of the form before, and then I tried to see if it could be obtained in onMounted, and the result was similar. Put a button, and you can get the component in the click event of the button, because by the time you click the button, everything on the page has been loaded. Similarly, in the callback when the Dialog opening animation ends, the page must have been loaded early. Now that all the values ​​are present, there will be no problem of not being able to find the key during initialization at this time.

// Dialog
@opened="opened"

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

The above is the detailed content of How to solve the problem that inverse selection cannot be set for el-tree-select in Vue3?. For more information, please follow other related articles on the PHP Chinese website!