好久沒有寫博客了，剛好上周遇到一個(gè)難纏問題，這里記錄一下。

　　環(huán)境：Vue3.2、Element Plus

　　問題：子組件 setting.vue => 彈窗組件 Dialog => 樹選擇組件el-tree-select ，無法設(shè)置默認(rèn)選中項(xiàng) default-checked-keys

　　場(chǎng)景：在一個(gè)后臺(tái)系統(tǒng)的列表頁，選中一行數(shù)據(jù)，點(diǎn)擊設(shè)置按鈕，分配一些功能。這里的做法是把設(shè)置頁封裝在一個(gè)子組件里了，并且子組件里使用了Element Plus的Dialog組件

               然后Dialog里有個(gè)el-tree-select需要初始化賦值，因?yàn)樵诜峙渲埃赡苤胺峙溥^，需要設(shè)置反選

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

<template>
  <el-tree-select

　　　 :data="store().UserMenus"

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

　　然后發(fā)現(xiàn)不生效，周五的時(shí)候也能猜到原因，data綁定的pinia全局狀態(tài)里的值，組件被實(shí)例化時(shí)這個(gè)值可能還未被加載，所以設(shè)置default-expanded-keys時(shí)它就找不到節(jié)點(diǎn)數(shù)據(jù)，等組件被創(chuàng)建后，data有值了，但是default-expanded-keys又不會(huì)再重新設(shè)置了，就造成組件有下拉數(shù)據(jù)，但是沒有反選效果。

　　起初以為是個(gè)簡(jiǎn)單問題，于是動(dòng)了動(dòng)腦子，既然和順序有關(guān)，那自然考慮到生命周期了，于是在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這個(gè)變量，default-expanded-keys綁定selectArr。嗯，以為可以了，結(jié)果還是沒有反選成功。就.....離譜~

　　正常來講onMounted函數(shù)已經(jīng)是組件創(chuàng)建完畢并創(chuàng)建Dom了，這個(gè)時(shí)候我應(yīng)該可以設(shè)置list的值，再設(shè)置selectArr。但實(shí)際依然沒有反選成功。

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

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

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

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

// Dialog
@opened="opened"

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

　　之所以能找到這個(gè)思路，還有一個(gè)原因是也試了一下表單，之前表單的提交事件里一直可以獲取到表單對(duì)象，然后試了一下onMounted里能不能獲取到，結(jié)果也是類似的情況。放個(gè)按鈕，在按鈕的點(diǎn)擊事件里是可以獲取到組件的，因?yàn)榈饶憧梢渣c(diǎn)擊按鈕時(shí)，頁面什么東西都加載完畢了，同樣的，Dialog 打開動(dòng)畫結(jié)束時(shí)的回調(diào)里，頁面肯定早加載完畢了，該有的值都有了，那么這個(gè)時(shí)候做初始化就不會(huì)存在找不到key的問題了。

// Dialog
@opened="opened"

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

　　這個(gè)問題看似簡(jiǎn)單，最后opened方法搞定了，但實(shí)際很考驗(yàn)Vue的功底，什么時(shí)候組件被創(chuàng)建，什么時(shí)候數(shù)據(jù)被加載，每個(gè)屬性之間數(shù)據(jù)的聯(lián)動(dòng)以及先后順序，如果你寫個(gè)固定值放在data和keys那里，肯定沒這個(gè)問題，Element Plus官方文檔大把的案例拿過來直接就有效果，但是呢，實(shí)際的項(xiàng)目開發(fā)中，經(jīng)常是多個(gè)技術(shù)點(diǎn)綜合在一起，你基本不可能把一個(gè)下拉框的值寫死了，也許你和我一樣從pinia里取的值，也許你通過axios讀的數(shù)據(jù)，也許是別的路子，但是多少會(huì)遇到一些和預(yù)期不符的時(shí)候，因此這里以這個(gè)案例分享一下，自己也做個(gè)記錄，如果有人遇到了類似的問題可以參考一二，有更好的方案也可以提出來一起交流交流。

到此這篇關(guān)于Vue3中無法為el-tree-select設(shè)置反選問題分析的文章就介紹到這了,更多相關(guān)Vue3 無法為el-tree-select內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論