先看一下最后的效果：
一個基于elementui的穿梭框組件：el-tree-transfer
第一步：安裝組件
npm install el-tree-transfer --save
第二步：寫代碼
// 使用樹形穿梭框組件<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>
import treeTransfer from 'el-tree-transfer' // 引入export defult {data(){return:{mode: "transfer", // transfer addressListfromData:[{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 和通訊錄模式addressListchangeMode() {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 } // 注冊}
把上面的代碼寫完之后，就可以了哦。
參數說明：
-
參數：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的需求 -
事件：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模式時返回參數為右側收件人列表、右側抄送人列表、右側密送人列表
)
