摘要：在市面上找到一個好用的樹形穿梭框組件都很難，又不想僅僅因為一個穿梭框在之外引入其他重量級插件，因此就有了。版本增加穿梭框左側右側數據勾選事件，穿梭框左側右側底部。

因為公司業務使用vue框架，ui庫使用的element-ui。在市面上找到一個好用的vue樹形穿梭框組件都很難，又不想僅僅因為一個穿梭框在element-ui之外引入其他重量級插件，因此就有了el-tree-transfer。輕量，易用，無需投入其他學習成本。

el-tree-fransfer是一個基于VUE和element-ui的樹形穿梭框組件，使用前請確認已經引入element-ui！ 此組件功能類似于element-ui的transfer組件，但是里面的數據是樹形結構！ 實際上，el-tree-transfer依賴的element-ui組件分別是Checkbox 多選框，Button 按鈕，和最主要的Tree 樹形控件寫成！并非是在element-ui的穿梭框組件上的擴展，而僅僅是參照了其外觀樣式和功能。ui完全按照element-ui風格。
注意：使用此插件時默認你已經引入了element-ui的button，check-box，tree組件！

第一層數據的 pid 請設定為 0！！
id推薦為string，但也可以是number，請不要混用，id不能重復！

先npm下載插件

npm install el-tree-transfer --save

或

npm i el-tree-transfer -S

然后你可以像使用普通組件一樣使用el-tree-transfer

GitHub demo代碼地址 歡迎star 謝謝

參數：width 說明：寬度 類型：String 必填：false 默認：100% 補充：建議在外部盒子設定寬度和位置

參數：height 說明：高度 類型：String 必填：false 默認：320px

參數：title 說明：標題 類型：Array 必填：false 默認：["源列表", "目標列表"]

參數：button_text 說明：按鈕名字 類型：Array 必填：false 默認：空

參數：from_data 說明：源數據 類型：Array 必填：true 補充：數據格式同element-ui tree組件，但必須有id和pid

參數：to_data 說明：目標數據 類型：Array 必填：true 補充：數據格式同element-ui tree組件，但必須有id和pid

參數：defaultProps 說明：配置項-同el-tree中props 必填： false 補充：用法和el-tree的props一樣

參數：node_key 說明：自定義node-key的值，默認為id 必填：false 補充：必須與treedata數據內的id參數名一致，必須唯一

參數：pid 說明：自定義pid的參數名，默認為"pid" 必填：false 補充：有網友提出后臺給的字段名不叫pid，因此增加自定義支持

參數：leafOnly 說明：是否只返回葉子節點 類型：Boolean 必填：false 補充：默認false，如果你只需要返回的末端子節點可使用此參數

參數：filter 說明：是否開啟篩選功能 類型：Boolean 必填：false

參數：openAll 說明：是否默認展開全部 類型：Boolean 必填：false

參數：renderContent 說明：自定義樹節點 類型：Function 必填：false 補充：用法同element-ui tree

參數：mode 說明：設置模式，字段可選值為transfer|addressList 類型：String 必填：false 補充：mode默認為transfer模式，即樹形穿梭框模式，可配置字段為addressList改為通訊錄模式，通訊錄模式時按鈕不可自定義名字，如要自定義標題名在title數組傳入四個值即可，addressList模式時標題默認為通訊錄、收件人、抄送人、密送人

參數：transferOpenNode 說明：穿梭后是否展開穿梭的節點 類型：Boolean 必填：false 補充：默認為true即展開穿梭的節點，便于視覺查看，增加此參數是因為數據量大時展開會有明顯卡頓問題，但注意，如此參數設置為false則穿梭后不展開，畢竟無法確定第幾層就會有龐大數據

參數：defaultCheckedKeys 說明：默認展開節點 類型：Array 必填：false 補充：只匹配初始時默認節點，不會在你操作后動態改變默認節點

參數：placeholder 說明：設置搜索框提示語 類型：String 必填：false 補充：默認為請輸入關鍵詞進行篩選

參數：defaultTransfer 說明：是否自動穿梭一次默認選中defaultCheckedKeys的節點 類型：Boolean 必填：false 補充：默認false，用來滿足用戶不想將數據拆分成fromData和toData的需求

參數：arrayToTree 說明：是否開啟一維數組轉化為樹形結構 類型：Boolean 必填：false 補充：數據必須存在根節點，并且不會斷節，數據格式詳見github上app.vue，根據id、pid對應關系轉化，存在一定的性能問題

參數：addressOptions 說明：通訊錄模式配置項{num: Number, suffix: String, connector: String} 類型：Object 必填：false 補充：num-> 所需右側通訊錄個數,默認3 suffix-> label后想要拼接的字段（如id，即取此條數據的id拼接在后方）默認suffix connector -> 連接符（字符串）默認-

參數：lazy 說明：是否啟用懶加載 類型：Boolean 必填：false 補充：默認false，效果動el-tree懶加載，不可和openAll或默認展開同時使用

參數：lazyFn 說明：懶加載的回調函數 類型：Function 必填：true 補充：當適用lazy時必須傳入回調函數，示例:lazyFn="loadNode",返回參數loadNode(node, resolve, from), node->當前展開節點node，resolve->懶加載resolve，from -> left|right 表示回調來自左側|右側

事件：addBtn 說明：點擊添加按鈕時觸發的事件 回調參數：function(fromData,toData,obj),樹形穿梭框transfer模式分別為1.移動后左側數據，2.移動后右側數據，3.移動的節點keys、nodes、halfKeys、halfNodes對象；通訊錄addressList模式時返回參數為右側收件人列表、右側抄送人列表、右側密送人列表

事件：removeBtn 說明：點擊移除按鈕時觸發的事件 回調參數：function(fromData,toData,obj),樹形穿梭框transfer模式分別為1.移動后左側數據，2.移動后右側數據，3.移動的節點keys、nodes、halfKeys、halfNodes對象；通訊錄addressList模式時返回參數為右側收件人列表、右側抄送人列表、右側密送人列表

事件：left-check-change 說明：左側源數據勾選事件 回調參數：function(nodeObj, treeObj)見el-tree組件check事件返回值

事件：right-check-change 說明：右側目標數據勾選事件 回調參數：function(nodeObj, treeObj)見el-tree組件check事件返回值

Slot：left-footer, right-footer 說明：穿梭框左側、右側底部slot

Slot: title-left, title-right 說明：穿梭框標題區左側、右側自定義內容

2.2.0 增加lazy懶加載功能(非通訊錄模式)，具體參數說明見參數21, 參數22
2.1.2 增加通訊錄模式的可配置項，但作為非主要維護模式靈活度仍較低，具體參數說明見參數20
2.1.1 修復 array 數組模式選擇根節點穿梭錯誤,廢棄leafOnly參數，注意已經是樹結構的不要使用 arrayToTree 參數
2.1.0 增加 arrayTotree 參數，處理一維數組自動轉化為所需樹結構(詳見參數 19,或github-app.vue)；修復穿梭后半選節點殘留的問題；去除部分不必要變量
2.0.2 增加標題頭部 slot 自定義內容區
2.0.1 修復父子不關聯問題。
2.0.0 版本增加穿梭框左側、右側數據勾選事件，穿梭框左側、右側底部 slot。
1.9.8 版本修復自定義按鈕button_text的報錯。
1.9.7 版本增加defaultTransfer屬性用來滿足用戶不想將數據拆分成fromData和toData的需求，增加placeholder屬性。
1.9.0 增強 id 既有數字又有字符型時的正則匹配強度。
1.8.9 版本修復一個節點既是一側的枝干節點又是另一側的葉子節點時穿梭引起的重復錯誤！解決自定義節點名時篩選無效錯誤。
1.8.8 版本增加transferOpenNode參數用來管理穿梭后是否展開節點，defaultCheckedKeys用來設置初始時默認展開節點。
1.8.7 版本增加通訊錄模式，可通過 mode 字段配置模式，mode 字段可選值為transfer|addressList。
1.7.7 版本 addBtn 和 removeBtn 事件參數調整，返回三個參數，第一個參數是移動后的fromData數據，第二個參數是移動后的toData數據，第三個參數是{keys, nodes, harfKeys, harfNodes}對象。增加 renderContent 參數支持樹節點自定義。
1.6.7 版本增加filter,openAll參數，來設置是否開啟篩選和是否默認展開全部
1.5.9版本增加leafOnly參數，來設置是否只返回樹的末端葉子節點
1.5.8版本恢復上個版本莫名刪掉的返回 nodes 的代碼，如果您的項目只需要穿梭的node-key值則無需更新！道歉ing。。。
1.5.7版本修復子組件異步數據有時不會更新的問題！修復了自定義參數名node_key,children時的一個錯誤，自動把第一層數據的pid替換為0
1.4.9版本增加了添加和移除按鈕的回調參數，function(keys,nodes)第一個參數為選中節點node-key值，第二個參數為選中節點node
1.4.8 版本修復了id為number類型時無法通過重復校驗函數的問題，但仍然推薦id使用string型
1.4.7 版本增加了defaultProps參數，node_key參數，pid參數，主要作用為可以自定義一些重要字段名，來提高數據靈活性，避免和后臺因為字段名不同而被祭天
1.3.7 版本取消了對loadsh庫的依賴，此前僅用此庫做某些深拷貝處理