摘要：在市面上找到一個(gè)好用的樹(shù)形穿梭框組件都很難，又不想僅僅因?yàn)橐粋€(gè)穿梭框在之外引入其他重量級(jí)插件，因此就有了。版本增加穿梭框左側(cè)右側(cè)數(shù)據(jù)勾選事件，穿梭框左側(cè)右側(cè)底部。

因?yàn)楣緲I(yè)務(wù)使用vue框架，ui庫(kù)使用的element-ui。在市面上找到一個(gè)好用的vue樹(shù)形穿梭框組件都很難，又不想僅僅因?yàn)橐粋€(gè)穿梭框在element-ui之外引入其他重量級(jí)插件，因此就有了el-tree-transfer。輕量，易用，無(wú)需投入其他學(xué)習(xí)成本。

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

第一層數(shù)據(jù)的 pid 請(qǐng)?jiān)O(shè)定為 0??！
id推薦為string，但也可以是number，請(qǐng)不要混用，id不能重復(fù)！

先npm下載插件

npm install el-tree-transfer --save

或

npm i el-tree-transfer -S

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

GitHub demo代碼地址 歡迎star 謝謝

參數(shù)：width 說(shuō)明：寬度 類型：String 必填：false 默認(rèn)：100% 補(bǔ)充：建議在外部盒子設(shè)定寬度和位置

參數(shù)：height 說(shuō)明：高度 類型：String 必填：false 默認(rèn)：320px

參數(shù)：title 說(shuō)明：標(biāo)題 類型：Array 必填：false 默認(rèn)：["源列表", "目標(biāo)列表"]

參數(shù)：button_text 說(shuō)明：按鈕名字 類型：Array 必填：false 默認(rèn)：空

參數(shù)：from_data 說(shuō)明：源數(shù)據(jù) 類型：Array 必填：true 補(bǔ)充：數(shù)據(jù)格式同element-ui tree組件，但必須有id和pid

參數(shù)：to_data 說(shuō)明：目標(biāo)數(shù)據(jù) 類型：Array 必填：true 補(bǔ)充：數(shù)據(jù)格式同element-ui tree組件，但必須有id和pid

參數(shù)：defaultProps 說(shuō)明：配置項(xiàng)-同el-tree中props 必填： false 補(bǔ)充：用法和el-tree的props一樣

參數(shù)：node_key 說(shuō)明：自定義node-key的值，默認(rèn)為id 必填：false 補(bǔ)充：必須與treedata數(shù)據(jù)內(nèi)的id參數(shù)名一致，必須唯一

參數(shù)：pid 說(shuō)明：自定義pid的參數(shù)名，默認(rèn)為"pid" 必填：false 補(bǔ)充：有網(wǎng)友提出后臺(tái)給的字段名不叫pid，因此增加自定義支持

參數(shù)：leafOnly 說(shuō)明：是否只返回葉子節(jié)點(diǎn) 類型：Boolean 必填：false 補(bǔ)充：默認(rèn)false，如果你只需要返回的末端子節(jié)點(diǎn)可使用此參數(shù)

參數(shù)：filter 說(shuō)明：是否開(kāi)啟篩選功能 類型：Boolean 必填：false

參數(shù)：openAll 說(shuō)明：是否默認(rèn)展開(kāi)全部 類型：Boolean 必填：false

參數(shù)：renderContent 說(shuō)明：自定義樹(shù)節(jié)點(diǎn) 類型：Function 必填：false 補(bǔ)充：用法同element-ui tree

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

參數(shù)：transferOpenNode 說(shuō)明：穿梭后是否展開(kāi)穿梭的節(jié)點(diǎn) 類型：Boolean 必填：false 補(bǔ)充：默認(rèn)為true即展開(kāi)穿梭的節(jié)點(diǎn)，便于視覺(jué)查看，增加此參數(shù)是因?yàn)閿?shù)據(jù)量大時(shí)展開(kāi)會(huì)有明顯卡頓問(wèn)題，但注意，如此參數(shù)設(shè)置為false則穿梭后不展開(kāi)，畢竟無(wú)法確定第幾層就會(huì)有龐大數(shù)據(jù)

參數(shù)：defaultCheckedKeys 說(shuō)明：默認(rèn)展開(kāi)節(jié)點(diǎn) 類型：Array 必填：false 補(bǔ)充：只匹配初始時(shí)默認(rèn)節(jié)點(diǎn)，不會(huì)在你操作后動(dòng)態(tài)改變默認(rèn)節(jié)點(diǎn)

參數(shù)：placeholder 說(shuō)明：設(shè)置搜索框提示語(yǔ) 類型：String 必填：false 補(bǔ)充：默認(rèn)為請(qǐng)輸入關(guān)鍵詞進(jìn)行篩選

參數(shù)：defaultTransfer 說(shuō)明：是否自動(dòng)穿梭一次默認(rèn)選中defaultCheckedKeys的節(jié)點(diǎn) 類型：Boolean 必填：false 補(bǔ)充：默認(rèn)false，用來(lái)滿足用戶不想將數(shù)據(jù)拆分成fromData和toData的需求

參數(shù)：arrayToTree 說(shuō)明：是否開(kāi)啟一維數(shù)組轉(zhuǎn)化為樹(shù)形結(jié)構(gòu) 類型：Boolean 必填：false 補(bǔ)充：數(shù)據(jù)必須存在根節(jié)點(diǎn)，并且不會(huì)斷節(jié)，數(shù)據(jù)格式詳見(jiàn)github上app.vue，根據(jù)id、pid對(duì)應(yīng)關(guān)系轉(zhuǎn)化，存在一定的性能問(wèn)題

參數(shù)：addressOptions 說(shuō)明：通訊錄模式配置項(xiàng){num: Number, suffix: String, connector: String} 類型：Object 必填：false 補(bǔ)充：num-> 所需右側(cè)通訊錄個(gè)數(shù),默認(rèn)3 suffix-> label后想要拼接的字段（如id，即取此條數(shù)據(jù)的id拼接在后方）默認(rèn)suffix connector -> 連接符（字符串）默認(rèn)-

參數(shù)：lazy 說(shuō)明：是否啟用懶加載 類型：Boolean 必填：false 補(bǔ)充：默認(rèn)false，效果動(dòng)el-tree懶加載，不可和openAll或默認(rèn)展開(kāi)同時(shí)使用

參數(shù)：lazyFn 說(shuō)明：懶加載的回調(diào)函數(shù) 類型：Function 必填：true 補(bǔ)充：當(dāng)適用lazy時(shí)必須傳入回調(diào)函數(shù)，示例:lazyFn="loadNode",返回參數(shù)loadNode(node, resolve, from), node->當(dāng)前展開(kāi)節(jié)點(diǎn)node，resolve->懶加載resolve，from -> left|right 表示回調(diào)來(lái)自左側(cè)|右側(cè)

事件：addBtn 說(shuō)明：點(diǎn)擊添加按鈕時(shí)觸發(fā)的事件 回調(diào)參數(shù)：function(fromData,toData,obj),樹(shù)形穿梭框transfer模式分別為1.移動(dòng)后左側(cè)數(shù)據(jù)，2.移動(dòng)后右側(cè)數(shù)據(jù)，3.移動(dòng)的節(jié)點(diǎn)keys、nodes、halfKeys、halfNodes對(duì)象；通訊錄addressList模式時(shí)返回參數(shù)為右側(cè)收件人列表、右側(cè)抄送人列表、右側(cè)密送人列表

事件：removeBtn 說(shuō)明：點(diǎn)擊移除按鈕時(shí)觸發(fā)的事件 回調(diào)參數(shù)：function(fromData,toData,obj),樹(shù)形穿梭框transfer模式分別為1.移動(dòng)后左側(cè)數(shù)據(jù)，2.移動(dòng)后右側(cè)數(shù)據(jù)，3.移動(dòng)的節(jié)點(diǎn)keys、nodes、halfKeys、halfNodes對(duì)象；通訊錄addressList模式時(shí)返回參數(shù)為右側(cè)收件人列表、右側(cè)抄送人列表、右側(cè)密送人列表

事件：left-check-change 說(shuō)明：左側(cè)源數(shù)據(jù)勾選事件 回調(diào)參數(shù)：function(nodeObj, treeObj)見(jiàn)el-tree組件check事件返回值

事件：right-check-change 說(shuō)明：右側(cè)目標(biāo)數(shù)據(jù)勾選事件 回調(diào)參數(shù)：function(nodeObj, treeObj)見(jiàn)el-tree組件check事件返回值

Slot：left-footer, right-footer 說(shuō)明：穿梭框左側(cè)、右側(cè)底部slot

Slot: title-left, title-right 說(shuō)明：穿梭框標(biāo)題區(qū)左側(cè)、右側(cè)自定義內(nèi)容

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