Vue3中無法為el-tree-select設置反選問題怎么解決

本文小編為大家詳細介紹“Vue3中無法為el-tree-select設置反選問題怎么解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue3中無法為el-tree-select設置反選問題怎么解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

　　環境：Vue3.2、Element Plus

　　問題：子組件 setting.vue => 彈窗組件 Dialog => 樹選擇組件el-tree-select ，無法設置默認選中項 default-checked-keys

　　場景：在一個后臺系統的列表頁，選中一行數據，點擊設置按鈕，分配一些功能。這里的做法是把設置頁封裝在一個子組件里了，并且子組件里使用了Element Plus的Dialog組件

               然后Dialog里有個el-tree-select需要初始化賦值，因為在分配之前，可能之前分配過，需要設置反選

　　最開始是直接寫死，如下：

<template>
  <el-tree-select

　　　 :data="store().UserMenus"

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

　　然后發現不生效，周五的時候也能猜到原因，data綁定的pinia全局狀態里的值，組件被實例化時這個值可能還未被加載，所以設置default-expanded-keys時它就找不到節點數據，等組件被創建后，data有值了，但是default-expanded-keys又不會再重新設置了，就造成組件有下拉數據，但是沒有反選效果。

　　起初以為是個簡單問題，于是動了動腦子，既然和順序有關，那自然考慮到生命周期了，于是在setting.vue里加上onMounted，并在這里重新賦值：

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

　　data綁定list這個變量，default-expanded-keys綁定selectArr。嗯，以為可以了，結果還是沒有反選成功。就.....離譜~

　　正常來講onMounted函數已經是組件創建完畢并創建Dom了，這個時候我應該可以設置list的值，再設置selectArr。但實際依然沒有反選成功。

　　這說明加載依然存在問題，抱著研究的心態，于是我又想起一種方法，我可以通過調用el-tree-select的API來通過方法設置它的默認值，也就是setCheckedKeys方法！

　　通過模板引用，獲取到el-tree-select，命名為tree，然后回到onMounted里打印：console.log(tree.value)，好家伙，居然是個undefined，這說明在settting.vue的onMounted根本就無法設置選中的keys。然后詭異的是，在我反復修改代碼的時候，由于熱重載，Vue頁面會隨之更新，居然能反選上了！但是我一刷新，反選立刻失效。enmmmm ..... 基本能定位到問題的所在了，onMounted是無法獲取到組件的，后面試了一下onUnmounted，這個可以，但是我這是初始化邏輯，不可能寫在onUnmounted里。

　　這里面還存在一個因素導致該問題的產生，就是Dialog默認是不顯示的，通過v-model="dialogVisible"綁定的變量控制顯示隱藏，初始化值為false也是導致失效的一個原因，如我初始時設置dialogVisible.value = true ，那么反選是OK的，只不過我依然不可能設置為true，哪有彈窗一開始就顯示的。

　　周五下午基本卡在這個地方了，經過周末的放空自我（峽谷Timi），周一早上上班的路上復盤了一下，考慮從Dialog本身尋找答案，嘿，果不其然，它的API里有個opened方法，Dialog 打開動畫結束時的回調，我在這里做初始化，問題就解決了：

// Dialog
@opened="opened"

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

　　之所以能找到這個思路，還有一個原因是也試了一下表單，之前表單的提交事件里一直可以獲取到表單對象，然后試了一下onMounted里能不能獲取到，結果也是類似的情況。放個按鈕，在按鈕的點擊事件里是可以獲取到組件的，因為等你可以點擊按鈕時，頁面什么東西都加載完畢了，同樣的，Dialog 打開動畫結束時的回調里，頁面肯定早加載完畢了，該有的值都有了，那么這個時候做初始化就不會存在找不到key的問題了。

// Dialog
@opened="opened"

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

讀到這里，這篇“Vue3中無法為el-tree-select設置反選問題怎么解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。