上一篇我們實(shí)現(xiàn)了el-tree中子節(jié)點(diǎn)的選擇與添加，此外，我們還需要實(shí)現(xiàn)點(diǎn)擊右側(cè)刪除按鈕的時(shí)候，左側(cè)選擇器的選中狀態(tài)同步改變，checkList數(shù)組和checkIdList數(shù)組對(duì)應(yīng)的數(shù)據(jù)能夠同步刪除。

由于左側(cè)與右側(cè)綁定的是同一數(shù)組，只需要?jiǎng)h除時(shí)傳入item，將checkList中的item刪除，左側(cè)選擇器的選中狀態(tài)就可同步改變。如圖：

此時(shí)還需要?jiǎng)h除checkIdList數(shù)組中對(duì)應(yīng)的id。可先循環(huán)后臺(tái)數(shù)據(jù)，找到要?jiǎng)h除元素所在的那條數(shù)據(jù)并獲取其id，再將checkIdList數(shù)組中的id刪除即可。如圖：

最后，我們還需要一個(gè)關(guān)鍵詞搜索的功能。利用filter函數(shù)，當(dāng)匹配到關(guān)鍵詞就返回他所在的那條數(shù)據(jù)，并賦給一個(gè)新的數(shù)組。

可是這里有一個(gè)問題，每次搜索完之后樹節(jié)點(diǎn)都是關(guān)閉狀態(tài)，需要手動(dòng)將其展開，這樣用戶體驗(yàn)感非常不好?？戳艘幌翬lementUI官網(wǎng)，有提供default-expanded-keys屬性，控制默認(rèn)展開的節(jié)點(diǎn)的 key 的數(shù)組。所以我們?cè)趀l-tree標(biāo)簽上添加這個(gè)屬性：

方法內(nèi)使用過濾器的時(shí)候直接將默認(rèn)需要展開的節(jié)點(diǎn)id加到expandKeys數(shù)組中。

這樣搜索完樹節(jié)點(diǎn)便都是展開狀態(tài)，用戶能直接的看到數(shù)據(jù)，效果如圖所示：