上一篇我們實現了el-tree中子節點的選擇與添加,此外,我們還需要實現點擊右側刪除按鈕的時候,左側選擇器的選中狀態同步改變,checkList數組和checkIdList數組對應的數據能夠同步刪除。

由于左側與右側綁定的是同一數組,只需要刪除時傳入item,將checkList中的item刪除,左側選擇器的選中狀態就可同步改變。如圖:

此時還需要刪除checkIdList數組中對應的id??上妊h后臺數據,找到要刪除元素所在的那條數據并獲取其id,再將checkIdList數組中的id刪除即可。如圖:

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

可是這里有一個問題,每次搜索完之后樹節點都是關閉狀態,需要手動將其展開,這樣用戶體驗感非常不好??戳艘幌翬lementUI官網,有提供default-expanded-keys屬性,控制默認展開的節點的 key 的數組。所以我們在el-tree標簽上添加這個屬性:

方法內使用過濾器的時候直接將默認需要展開的節點id加到expandKeys數組中。

這樣搜索完樹節點便都是展開狀態,用戶能直接的看到數據,效果如圖所示:

上一篇: Echarts自定義提示框文字



