el-tree-transfer
因業(yè)務(wù)需求需要用到一個(gè)穿梭框組件，而各大主流UI庫(kù)和市面上的穿梭框都是一維數(shù)據(jù)，不支持樹形結(jié)構(gòu)的穿梭數(shù)據(jù)，
然后我自己就寫了一個(gè)樹形穿梭框組件，用戶界面完全按照元素的UI風(fēng)格。并且使用此插件時(shí)默認(rèn)你已經(jīng)引入了元素的用戶界面的按鈕，復(fù)選框，樹組件！并且是一個(gè)VUE項(xiàng)目，你就可以像使用普通VUE組件一樣使用它。
el-tree-fransfer
簡(jiǎn)介
el-tree-fransfer是一個(gè)基于VUE和element-ui的樹形穿梭框組件，使用前請(qǐng)確認(rèn)已經(jīng)引入元素-ui！此組件功能類似于element-ui的轉(zhuǎn)移組件，但是里面的數(shù)據(jù)是樹形結(jié)構(gòu)！實(shí)際上，el-tree-transfer依賴的element-ui組件分別是Checkbox多選框，Button按鈕，和最主要的Tree樹形控件寫成！并非是在element-ui的穿梭框組件上的擴(kuò)展，而僅僅是參照了其外觀樣式和功能。
因?yàn)楣緲I(yè)務(wù)使用VUE框架，UI庫(kù)使用的元素的用戶界面。在市面上找到一個(gè)好用的VUE樹形穿梭框組件都很難，又不想僅僅因?yàn)橐粋€(gè)穿梭框在元件的UI之外引入其他重量級(jí)插件，因此就有了EL-樹轉(zhuǎn)移。輕量，易用，無(wú)需投入其他學(xué)習(xí)成本。
注意！ 1.7.7版本移動(dòng)事件參數(shù)調(diào)整，直接返回移動(dòng)后的fromData數(shù)據(jù)和toData數(shù)據(jù)。
注意! （1.5版本以上會(huì)自動(dòng)處理）
第一層數(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?
// 你的代碼 ... // 使用樹形穿梭框組件import treeTransfer from 'el-tree-transfer' // 引入 export defult { data(){ return:{ fromData:[ { id: "1", pid: 0, label: "一級(jí) 1", children: [ { id: "1-1", pid: "1", label: "二級(jí) 1-1", children: [] }, { id: "1-2", pid: "1", label: "二級(jí) 1-2", children: [ { id: "1-2-1", pid: "1-2", children: [], label: "二級(jí) 1-2-1" }, { id: "1-2-2", pid: "1-2", children: [], label: "二級(jí) 1-2-2" } ] } ] }, ], toData:[] } }, methods:{ // 監(jiān)聽(tīng)穿梭框組件添加 add(fromData,toData,obj){ conlose.log('fromData',fromData); conlose.log('toData',toData); conlose.log('obj',obj); }, // 監(jiān)聽(tīng)穿梭框組件移除 remove(fromData,toData,obj){ conlose.log('fromData',fromData); conlose.log('toData',toData); conlose.log('obj',obj); } }, comporents:{ treeTransfer } // 注冊(cè) } ...
...
文檔
1. 參數(shù)：`width` 說(shuō)明：`寬度` 類型：`String` 必填：`false` 默認(rèn)：`100%` 補(bǔ)充：`建議在外部盒子設(shè)定寬度和位置`
2.? 參數(shù)：`height` 說(shuō)明：`高度` 類型：`String` 必填：`false` 默認(rèn)：`320px`
3.? 參數(shù)：`title` 說(shuō)明：`標(biāo)題` 類型：`Array` 必填：`false` 默認(rèn)：`["源列表", "目標(biāo)列表"]`
4.? 參數(shù)：`button_text` 說(shuō)明：`按鈕名字` 類型：`Array` 必填：`false` 默認(rèn)：`空`
5.? 參數(shù)：`from_data` 說(shuō)明：`源數(shù)據(jù)` 類型：`Array` 必填：`true` 補(bǔ)充：`數(shù)據(jù)格式同element-ui tree組件，但必須有id和pid`
6.? 參數(shù)：`to_data` 說(shuō)明：`目標(biāo)數(shù)據(jù)` 類型：`Array` 必填：`true` 補(bǔ)充：`數(shù)據(jù)格式同element-ui tree組件，但必須有id和pid`
7.? 參數(shù)：`defaultProps` 說(shuō)明：`配置項(xiàng)-同el-tree中props` 必填： `false` 補(bǔ)充：`用法和el-tree的props一樣`
8.? 參數(shù)：`node_key` 說(shuō)明：`自定義node-key的值，默認(rèn)為id` 必填：`false` 補(bǔ)充：`必須與treedata數(shù)據(jù)內(nèi)的id參數(shù)名一致，必須唯一`
9.? 參數(shù)：`pid` 說(shuō)明：`自定義pid的參數(shù)名，默認(rèn)為"pid"` 必填：`false` 補(bǔ)充：`有網(wǎng)友提出后臺(tái)給的字段名不叫pid，因此增加自定義支持`
10. 參數(shù)：`leafOnly` 說(shuō)明：`是否只返回葉子節(jié)點(diǎn)` 類型：`Boolean` 必填：`false` 補(bǔ)充：`默認(rèn)false，如果你只需要返回的末端子節(jié)點(diǎn)可使用此參數(shù)`
11. 參數(shù)：`filter` 說(shuō)明：`是否開啟篩選功能` 類型：`Boolean` 必填：`false`
12. 參數(shù)：`openAll` 說(shuō)明：`是否默認(rèn)展開全部` 類型：`Boolean` 必填：`false`
13. 參數(shù)：`renderContent` 說(shuō)明：`自定義樹節(jié)點(diǎn)` 類型：`Function` 必填：`false` 補(bǔ)充：`用法同element-ui tree`
14. 事件：`addBtn` 說(shuō)明：`點(diǎn)擊添加按鈕時(shí)觸發(fā)的事件` 回調(diào)參數(shù)：`keys:data為選中節(jié)點(diǎn)id,nodes:data為選中節(jié)點(diǎn)`
15. 事件：`removeBtn` 說(shuō)明：`點(diǎn)擊移除按鈕時(shí)觸發(fā)的事件` 回調(diào)參數(shù)：`keys:data為選中節(jié)點(diǎn)id,nodes:data為選中節(jié)點(diǎn)`
版本說(shuō)明
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ù)支持樹節(jié)點(diǎn)自定義。
1.6.7 版本增加`filter,openAll`參數(shù)，來(lái)設(shè)置是否開啟篩選和是否默認(rèn)展開全部
1.5.9版本增加`leafOnly`參數(shù)，來(lái)設(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ù)做某些深拷貝處理
