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

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

此時還需要刪除checkIdList數(shù)組中對應(yīng)的id?？上妊h(huán)后臺數(shù)據(jù)，找到要刪除元素所在的那條數(shù)據(jù)并獲取其id，再將checkIdList數(shù)組中的id刪除即可。如圖：

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

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

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

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