本文地址：https://www.cnblogs.com/veinyin/p/14340241.html
不適用多級樹狀穿梭框，本文基於兩層樹實現，全文沒有代碼，只有思路，如果有更好的實現方式，歡迎留言
一、需求：
1. 穿梭框左右側均為省市樹（只有兩個層級），支持搜索
2. 某城市從左側移到右側后，左側不再展示該城市
3. 移動省下部分城市，左右側這個省都要作為父節點展示
左右兩側都有湖北這個父節點，武漢、黃石、十堰已移到右側，左側不再展示
二、技術方案
優先選擇框架已有組件，查看 antdv 示例，效果如下
根據示例可知，穿梭框列表可以自定義，通過插槽展示，未做樹搜索，要測試一下自帶的能不能用
在示例代碼上測試，發現樹的展示數據需要前端維護， Transfer 搜索只能搜索最外層，無法搜索子節點，也需要前端實現
因此需要實現的內容包括：左右兩棵樹的展示，樹的搜索過濾，移動之后的節點處理（隱藏、展示、父節點的處理）
三、實現細節
通過接口獲取左右兩棵樹的原始數據后，就要考慮展示問題了。
1. 子節點移動之后如何剔除
2. 對一個父節點來說，移動是否還有子節點，是否需要剔除父節點，甚至右側移動過來的節點如何插到父節點下，是否需要新增父節點
3. 搜索，如果匹配到父節點，子節點是否保留，匹配子節點后，剔除空的父節點
4. 左右都移動之后的搜索怎么展示
...等等交互
因為是通過插槽控制穿梭框左右兩側的展示內容，這兩棵樹幾乎完全可以由前端控制
對穿梭框，需要記錄移到右側的項：
1. targetKeys - 記錄右側的所有 key，只有編碼 list
2. targetList - 包括每一項詳細信息的 list
對左右兩棵樹，都需要這些字段：
1. keyword - 搜索關鍵字
2. showData - 最終用於展示的數據
3. originalData - 原始數據
4. checkedKeys - 樹中勾選項
5. expandedKeys - 樹中展開的父節點
考慮到只有兩層，可以先將左右兩棵樹拍平，合並得到 totalList，totalList 就是左右兩棵樹共享的數據，數組的差集和過濾比樹結構要好做很多
左側樹的數據 = 全部數據 - targetList，如果搜索，就將上一步得到的 list 過濾一下，最后將數組轉成樹結構(showData)
右側同理，就是 targetList，搜索的話就再過濾下，最后轉為樹結構
需要計算左右側展示數據的場景：初始化、移動、搜索
數組轉樹的過程中可以同時獲取 expandedKeys，比如右側總是打開狀態，左側只有在搜索時展開父節點