tree transfer
1.0.0
el-tree-fransfer 是一個基於VUE 和element-ui 的樹狀穿梭框組件，使用前請確認已經引入element-ui！ 此元件功能類似element-ui的transfer元件，但裡面的資料是樹狀結構！ 實際上，el-tree-transfer 依賴的element-ui 元件分別是Checkbox 多選框，Button 按鈕，和最主要的Tree 樹狀控制項寫成！並非是在element-ui 的穿梭框組件上的擴展，而僅僅是參考了其外觀樣式和功能。
因為公司業務使用vue 框架，ui 函式庫使用的element-ui。在市面上找到一個好用的vue 樹形穿梭框組件都很難，又不想僅僅因為一個穿梭框在element-ui 之外引入其他重量級插件，因此就有了el-tree-transfer。輕量，易用，無需投入其他學習成本。
2.4.6修正重構錯誤（請勿使用2.4.0-2.4.5）；增加父子不關聯的三種模式(其中完成授權模式)；調整元件目錄結構；重構穿梭演算法，demo資料粗略測試效能提升較大；優化父子不關聯時全選；修改事件addBtn為add-btn，removeBtn為remove-btn；增加拖曳；增加自訂節點slot；修復左右同時選取穿梭兩次後的資料消失；搜尋框增加清空；增加父子不關聯穿梭功能
2.3.3 修改穿梭匹配邏輯；增加rootPidValue參數。詳細說明請見下方版本說明
先npm 下載插件
npm install el-tree-transfer --save
或
npm i el-tree-transfer -S
然後你可以像使用普通元件一樣使用el-tree-transfer
< template >
< div >
// 你的代码
...
// 使用树形穿梭框组件
< tree-transfer : title = " title " :from_data='fromData' :to_data='toData' :defaultProps=" { label: 'label' } " @add-btn='add' @remove-btn='remove' :mode='mode' height='540px' filter openAll>
</ tree - transfer >
< / div >
</ template >
< script >
import treeTransfer from 'el-tree-transfer' // 引入
export defult {
data ( ) {
return : {
mode : "transfer" , // transfer addressList
fromData : [
{
id : "1" ,
pid : 0 ,
label : "一级 1" ,
children : [
{
id : "1-1" ,
pid : "1" ,
label : "二级 1-1" ,
disabled : true ,
children : [ ]
} ,
{
id : "1-2" ,
pid : "1" ,
label : "二级 1-2" ,
children : [
{
id : "1-2-1" ,
pid : "1-2" ,
children : [ ] ,
label : "二级 1-2-1"
} ,
{
id : "1-2-2" ,
pid : "1-2" ,
children : [ ] ,
label : "二级 1-2-2"
}
]
}
]
} ,
] ,
toData : [ ]
}
} ,
methods: {
// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
changeMode ( ) {
if ( this . mode == "transfer" ) {
this . mode = "addressList" ;
} else {
this . mode = "transfer" ;
}
} ,
// 监听穿梭框组件添加
add ( fromData , toData , obj ) {
// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console . log ( "fromData:" , fromData ) ;
console . log ( "toData:" , toData ) ;
console . log ( "obj:" , obj ) ;
} ,
// 监听穿梭框组件移除
remove ( fromData , toData , obj ) {
// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console . log ( "fromData:" , fromData ) ;
console . log ( "toData:" , toData ) ;
console . log ( "obj:" , obj ) ;
}
} ,
components : { treeTransfer } // 注册
}
</ script >
< style >
...
</ style > | 序號 | 參數 | 說明 | 類型 | 預設值 | 補充 |
|---|---|---|---|---|---|
| 1 | width | 寬度 | String | 100% | 建議在外部盒子設定寬度和位置 |
| 2 | height | 高度 | String | 320px | - |
| 3 | title | 標題 | String | ["來源清單", "目標清單"] | - |
| 4 | button_text | 按鈕名字 | Array | - | - |
| 5 | from_data | 來源資料 | Array | - | 資料格式同element-ui tree組件，但必須有id和pid |
| 6 | to_data | 目標數據 | Array | - | 資料格式同element-ui tree組件，但必須有id和pid |
| 7 | defaultProps | 配置項-同el-tree中props | Object | { label: "label", children: "children", isLeaf: "leaf", disable: "disable" } | 用法和el-tree的props一樣 |
| 8 | node_key | 自訂node-key的值，預設為id | String | id | 必須與treedata資料內的id參數名一致，必須唯一 |
| 9 | pid | 自訂pid的參數名，預設為"pid" | String | pid | 有網友提出後台給的欄位名稱不叫pid，因此增加自訂支持 |
| 10 | leafOnly | 廢棄 | - | - | - |
| 11 | filter | 是否開啟篩選功能 | Boolean | false | 根據defaultProps參數的label欄位篩選 |
| 12 | openAll | 是否預設展開全部 | Boolean | false | 存在效能問題 |
| 13 | 自訂樹節點，用法同element-ui tree | Function | - | 2.2.3版本拆為兩個函數分別定義左右兩側自訂節點 | |
| 14 | mode | 設定穿梭框模式 | String | transfer | mode預設為transfer模式，即樹狀穿梭框模式，可設定欄位為addressList改為通訊錄模式，通訊錄模式時按鈕不可自訂名字，如要自訂標題名稱在title陣列傳入四個值即可，addressList模式時標題預設為通訊錄、收件者、副本、密送人 |
| 15 | transferOpenNode | 穿梭後是否展開穿梭的節點 | Boolean | true | 預設為true即展開穿梭的節點，便於視覺查看，增加此參數是因為資料量大時展開會有明顯卡頓問題，但注意，如此參數設定為false則穿梭後不展開，畢竟無法確定第幾層就會有龐大數據 |
| 16 | defaultCheckedKeys | 預設選取節點 | Array | false | 只匹配初始時預設節點，不會在你操作後動態改變預設節點 |
| 17 | placeholder | 設定搜尋框提示語 | String | 輸入關鍵字進行篩選 | - |
| 18 | defaultTransfer | 是否自動穿梭一次預設選取defaultCheckedKeys的節點 | Boolean | false | 用來滿足用戶不想將資料拆分成fromData和toData的需求 |
| 19 | arrayToTree | 是否開啟一維數組轉化為樹狀結構 | Boolean | false | 資料必須存在根節點，且不會斷節，資料格式詳見github上app.vue，根據id、pid對應關係轉化，有一定的效能問題 |
| 20 | addressOptions | 通訊錄模式設定項 | Object | {num: Number, suffix: String, connector: String} | num-> 所需右側通訊錄個數,預設3 suffix-> label後想要拼接的欄位（如id，即取此條資料的id拼接在後方）預設suffix connector -> 連接符號（字串）預設- |
| 21 | lazy | 是否啟用懶加載 | Boolean | false | 效果動el-tree懶加載，不可和openAll或預設展開同時使用 |
| 22 | lazyFn | 懶加載的回呼函數 | Function | - | 適用lazy時必須傳入回呼函數，例:lazyFn='loadNode',回傳參數loadNode(node, resolve, from), node->目前展開節點node，resolve->懶載入resolve，from -> left/right表示回呼來自左側/右側 |
| 23 | high-light | 是否高亮目前選取節點 | Boolean | false | - |
| 24 | filterNode | 自訂搜尋函數 | Function | - | 不傳則仍預設依據defaultProps參數的label欄位篩選 |
| 25 | defaultExpandedKeys | 預設展開節點 | Array | - | 要展開的節點id數組，會自動去重生效在左右兩側 |
| 26 | lazyRight | 2.2.9 版本lazy屬性只對左側樹生效，如果需要右側也是用懶加載->lazyRight | Boolean | - | - |
| 27 | sjr | 通訊錄模式，設定右側收件者數據 | Array | - | - |
| 28 | csr | 通訊錄模式，設定右側抄送人數據 | Array | - | - |
| 29 | msr | 通訊錄模式，設定右側密送人數據 | Array | - | - |
| 30 | rootPidValue | 穿梭框模式，根節點資料pid的值，用於匹配退出循環，重要 | String,Number | 0 | - |
| 31 | checkStrictly | 是否父子不關聯 | Boolean | false | 此模式不支援lazy，回傳的fromData和toData是最新數據，obj裡面的keys，nodes不完整。且對刪空子節點後的父節點左右兩邊處理邏輯有差異：授權時既然要在右邊出現，必然需要左側父節點，而刪除授權時，移除子權限並不代表想要移除父權限 |
| 32 | renderAfterExpand | 是否在第一次展開某個樹節點後才渲染其子節點 | Boolean | true | - |
| 33 | expandOnClickNode | 是否在點擊節點的時候展開或是收縮節點 | Boolean | true | - |
| 34 | checkOnClickNode | 是否在點擊節點的時候選取節點 | Boolean | false | - |
| 35 | indent | 相鄰級節點間的水平縮進，單位為像素 | Number | 16 | - |
| 36 | icon-class | 自訂樹節點的圖標 | String | - | - |
| 37 | draggable | 是否開啟拖曳節點功能 | Boolean | false | - |
| 38 | allow-drag | 判斷節點能否被拖曳 | Function(node) | - | - |
| 39 | allow-drop | 拖曳時判定目標節點能否被放置 | Function(draggingNode, dropNode, type) | - | type 參數有三種情況：'prev'、'inner' 和'next'，分別表示放置在目標節點前、插入至目標節點和放置在目標節點後 |
| 40 | checkStrictlyType | 父子不關聯的三種模式:authorization授權模式,puppet木偶模式modular積木模式 | String | authorization:左側選擇子節點自動帶著父節點；右側選擇父節點自動帶著子節點；此模式兩側可能存在相同的非葉子節點;puppet:純父子不關聯穿梭，但要保持完整的樹型結構，只自動帶上穿梭到對面拼接所需的骨架結構；此模式兩側可能存在相同的非葉子節點;modular純父子不關聯穿梭，也不保持完整的樹形結構，像積木一樣右側要形成樹形則需要把左側拆除，左側拆的越多右側形成的樹結構越完整；此模式左右兩側保證嚴格的唯一性 |
| 序號 | 事件名稱 | 說明 | 回呼參數 |
|---|---|---|---|
| 1 | add-btn | 點選新增按鈕時觸發的事件(2.4.0以前為addBtn) | function(fromData,toData,obj),樹形穿梭框transfer模式分別為1.移動後左側數據，2.移動後右側數據，3.移動的節點keys、nodes、halfKeys、halfNodes物件；通訊錄addressList模式時傳回參數為右側收件者清單、右側副本清單、右側密送人清單 |
| 2 | remove-btn | 點選移除按鈕時觸發的事件(2.4.0以前為removeBtn) | function(fromData,toData,obj),樹形穿梭框transfer模式分別為1.移動後左側數據，2.移動後右側數據，3.移動的節點keys、nodes、halfKeys、halfNodes物件；通訊錄addressList模式時傳回參數為右側收件者清單、右側副本清單、右側密送人清單 |
| 3 | left-check-change | 左側來源資料勾選事件 | function(nodeObj, treeObj, checkAll)見el-tree組件check事件回傳值, 新增checkAll參數表示是否全部選中 |
| 4 | right-check-change | 右側目標資料勾選事件 | function(nodeObj, treeObj, checkAll)見el-tree組件check事件回傳值, 新增checkAll參數表示是否全部選中 |
| 5 | node-drag-start | 節點開始拖曳時觸發的事件 | 共3個參數，依序為："left"/"right"、被拖曳節點對應的Node、event |
| 6 | node-drag-enter | 拖曳進入其他節點時觸發的事件 | 共4個參數，依序為："left"/"right"、被拖曳節點對應的Node、所進入節點對應的Node、event |
| 7 | node-drag-leave | 拖曳離開某個節點時觸發的事件 | 共4個參數，依序為："left"/"right"、被拖曳節點對應的Node、所離開節點對應的Node、event |
| 8 | node-drag-over | 在拖曳節點時觸發的事件（類似瀏覽器的mouseover 事件） | 共4個參數，依序為："left"/"right"、拖曳節點對應的Node、目前進入節點對應的Node、event |
| 9 | node-drag-end | 拖曳結束時（可能未成功）觸發的事件 | 共5個參數，依序為："left"/"right"、被拖曳節點對應的Node、結束拖曳時最後進入的節點（可能為空白）、被拖曳節點的放置位置（before、after、 inner）、event |
| 10 | node-drop | 拖曳成功完成時觸發的事件 | 共5個參數，依序為："left"/"right"、被拖曳節點對應的Node、結束拖曳時最後進入的節點、被拖曳節點的放置位置（before、after、inner）、event |
| 序號 | 名稱 | 說明 |
|---|---|---|
| 1 | clearChecked | 清除選取節點，預設清除全部type：string left左边right右边all全部默认all |
| 2 | getChecked | 取得選取數據 |
| 3 | setChecked | 設定選取資料function(leftKeys = [], rightKeys = []) |
| 4 | clearFilter | 清除搜尋框條件，預設清除全部function(type: String) left左邊right右邊all全部預設all |
| 序號 | 名字 | 說明 |
|---|---|---|
| 1 | left-footer | 穿梭框左側、右側底部slot |
| 2 | right-footer | 穿梭框左側、右側底部slot |
| 3 | title-left | 穿梭框標題區左側、右側自訂內容 |
| 4 | title-right | 穿梭框標題區左側、右側自訂內容 |
| 5 | form | 左側內容區上部slot |
| 6 | to | 右側內容區上部slot |
| 7 | content-left | 自訂左側樹節點 |
| 8 | content-right | 自訂右側樹節點 |
2.4.6修正重構錯誤（請勿使用2.4.0-2.4.5）；增加父子不關聯的三種模式(其中完成授權模式)；調整元件目錄結構；重構穿梭演算法，demo資料粗略測試效能提升較大；優化父子不關聯時全選；修改事件addBtn為add-btn，removeBtn為remove-btn；增加拖曳；增加自訂節點slot；修復左右同時選取穿梭兩次後的資料消失；搜尋框增加清空；增加父子不關聯穿梭功能
2.3.3 更改判斷穿梭目標是否已在對面存在的演算法，避免原來str正則意外匹配結果（如children和list兩個字段裡都有這個id，穿梭移除後，children裡的數據沒了，list裡面資料還在，此時原來的配對邏輯仍會任務目標已在對面存在而忽略穿梭）；增加
rootPidValue字段，不再強制將根節點的pid都改為0
2.3.2 優化通訊錄模式
2.3.1 將外層對el-tree的css設定移入內層，消除2.3.0取消css scoped產生的影響
2.3.0 取消css scoped
2.2.9 版本lazy屬性只對左側樹生效，如果需要右側也是用懶加載->lazyRight
2.2.8 最佳化defaultCheckedKeys和defaultTransfer配合使用時，觸發了新增事件的問題，通常預設第一次穿梭是後台偷懶沒有產生fromData和toData 兩份數據，需要前端拆分，此時再觸發新增事件則務必要；另可不使用defaultTransfer而是在defaultCheckedKeys改變後手動呼叫addToAims(false)函數，參數傳false則不會觸發emit回調
2.2.6 增加
clearChecked清空選取節點方法
2.2.5 增加參數
defaultExpandedKeys預設展開節點
2.2.3 拆分自訂樹節點函數
参数13 renderContent為renderContentLeft,renderContentRight分別定義左右兩側自訂節點函數；增加filterNode函數來自訂搜尋
2.2.2 增加選取高亮參數
2.2.1 增加title處的全選事件，具體參數說明請參閱
事件3，事件4
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 庫的依賴，此前僅用此庫做某些深拷貝處理
參數： 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, checkall)见el-tree组件check事件返回值,新增第三个参数表示是否全部选中
事件： right-check-change說明：右侧目标数据勾选事件回呼參數： function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值，新增第三个参数表示是否全部选中
Slot： left-footer , right-footer說明：穿梭框左侧、右侧底部slot
Slot: title-left , title-right說明：穿梭框标题区左侧、右侧自定义内容
