一個基於vue和element-ui的樹形穿梭框組件

#el-tree-transfervue

Tree-shaped shuttle box component for vue framework, can also be used for mail address book component.用於vue框架的樹形穿梭框組件，也可用於郵件通信錄組件。node

##簡介·請先閱讀文檔及版本說明git

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

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組件！ vuecli3版本npm

在線訪問 - GitHub - NPM - SegmentFault - CSDN- 掘金

注意！ 2.2.0 版本增長lazy懶加載功能

注意！ 2.0.0 版本存在父子不關聯錯誤，2.1.1 版本增長 arrayToTree 支持，但已是樹形數據的請不要使用此參數

注意！ 1.9.0 版本加強id爲數字型的匹配強度，1.9.7版本增長`defaultTransfer`屬性用來知足用戶不想將數據拆分紅fromData和toData的需求

注意！ 1.8.9 版本修復一個節點既是一側的枝幹節點又是另外一側的葉子節點時穿梭引發的重複錯誤！解決自定義節點名時篩選無效錯誤

注意！ 1.8.7 版本增長通信錄模式，可經過 mode 字段配置模式

注意！ 1.7.7 版本移動事件參數調整，直接返回移動後的 fromData 數據和 toData 數據。

注意！ 1.5 以上版本改成自動處理

第一層數據的 pid 請設定爲 0！！ id推薦爲string，但也能夠是number，請不要混用，id不能重複！element-ui

##快速上手segmentfault

先npm下載插件數組

npm install el-tree-transfer --savemarkdown

或app

npm i el-tree-transfer -S

而後你能夠像使用普通組件同樣使用el-tree-transfer

GitHub demo代碼地址歡迎star 謝謝

<template>
    <div>
    // 你的代碼
    ...
    // 使用樹形穿梭框組件
    <tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}"             @addBtn='add' @removeBtn='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",
                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);
      }
    },
    comporents:{ treeTransfer } // 註冊
  }

</script>


<style>
...
</style>
複製代碼

文檔

序號	參數	說明	類型	必填	可選值	默認值	補充
1	width	寬度	String	false	-	100%	建議在外部盒子設定寬度和位置
2	height	高度	String	false	-	320px	-
3	title	標題	String	false	-	["源列表", "目標列表"]	-
4	button_text	按鈕名字	Array	false	-	-	-
5	from_data	源數據	Array	true	-	-	數據格式同element-ui tree組件，但必須有id和pid
6	to_data	目標數據	Array	true	-	-	數據格式同element-ui tree組件，但必須有id和pid
7	defaultProps	配置項-同el-tree中props	Object	false	-	{ label: "label", children: "children", isLeaf: "leaf", disable: "disable" }	用法和el-tree的props同樣
8	node_key	自定義node-key的值，默認爲id	String	false	-	id	必須與treedata數據內的id參數名一致，必須惟一
9	pid	自定義pid的參數名，默認爲"pid"	String	false	-	pid	有網友提出後臺給的字段名不叫pid，所以增長自定義支持
10	leafOnly	廢棄	-	-	-	-	-
11	filter	是否開啓篩選功能	Boolean	false	-	false	根據defaultProps參數的label字段篩選
12	openAll	是否默認展開所有	Boolean	false	-	false	存在性能問題
13	~~renderContent~~ renderContentLeft, renderContentRight	自定義樹節點，用法同element-ui tree	Function	false	-	-	2.2.3版本拆爲兩個函數分別定義左右兩側自定義節點
14	mode	設置穿梭框模式	String	false	transfer/addressList	transfer	mode默認爲transfer模式，即樹形穿梭框模式，可配置字段爲addressList改成通信錄模式，通信錄模式時按鈕不可自定義名字，如要自定義標題名在title數組傳入四個值便可，addressList模式時標題默認爲通信錄、收件人、抄送人、密送人
15	transferOpenNode	穿梭後是否展開穿梭的節點	Boolean	false	-	true	默認爲true即展開穿梭的節點，便於視覺查看，增長此參數是由於數據量大時展開會有明顯卡頓問題，但注意，如此參數設置爲false則穿梭後不展開，畢竟沒法肯定第幾層就會有龐大數據
16	defaultCheckedKeys	默認選中節點	Array	false	-	-	只匹配初始時默認節點，不會在你操做後動態改變默認節點
17	placeholder	設置搜索框提示語	String	false	-	輸入關鍵詞進行篩選	-
18	defaultTransfer	是否自動穿梭一次默認選中defaultCheckedKeys的節點	Boolean	false	-	false	用來知足用戶不想將數據拆分紅fromData和toData的需求
19	arrayToTree	是否開啓一維數組轉化爲樹形結構	Boolean	false	-	false	數據必須存在根節點，而且不會斷節，數據格式詳見github上app.vue，根據id、pid對應關係轉化，存在必定的性能問題
20	addressOptions	通信錄模式配置項	Object	false	-	{num: Number, suffix: String, connector: String}	num-> 所需右側通信錄個數,默認3 suffix-> label後想要拼接的字段（如id，即取此條數據的id拼接在後方）默認suffix connector -> 鏈接符（字符串）默認-
21	lazy	是否啓用懶加載	Boolean	false	-	false	效果動el-tree懶加載，不可和openAll或默認展開同時使用
22	lazyFn	懶加載的回調函數	Function	true	-	-	當適用lazy時必須傳入回調函數，示例:lazyFn='loadNode',返回參數loadNode(node, resolve, from), node->當前展開節點node，resolve->懶加載resolve，from -> left/right 表示回調來自左側/右側
23	high-light	是否高亮當前選中節點	Boolean	false	-	false	-
24	filterNode	自定義搜索函數	Function	false	-	-	不傳則仍默認根據defaultProps參數的label字段篩選

序號	事件名稱	說明	回調參數
1	addBtn	點擊添加按鈕時觸發的事件	unction(fromData,toData,obj),樹形穿梭框transfer模式分別爲1.移動後左側數據，2.移動後右側數據，3.移動的節點keys、nodes、halfKeys、halfNodes對象；通信錄addressList模式時返回參數爲右側收件人列表、右側抄送人列表、右側密送人列表
2	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參數表示是否所有選中

序號	名字	說明
1	left-footer	穿梭框左側、右側底部slot
2	right-footer	穿梭框左側、右側底部slot
3	title-left	穿梭框標題區左側、右側自定義內容
4	title-right	穿梭框標題區左側、右側自定義內容

版本說明

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)見el-tree組件check事件返回值
事件：right-check-change 說明：右側目標數據勾選事件 回調參數：function(nodeObj, treeObj)見el-tree組件check事件返回值
Slot：left-footer, right-footer 說明：穿梭框左側、右側底部slot
Slot: title-left, title-right 說明：穿梭框標題區左側、右側自定義內容