1.首先在組件中引入el-tree-transfer
2.然后在template中使用注冊后的組件
- 參數：
title說明：標題類型：Array必填：false默認：["源列表", "目標列表"] - 事件：
left-check-change說明：左側源數據勾選事件回調參數：function(nodeObj, treeObj)見el-tree組件check事件返回值 - 事件：
right-check-change說明：右側目標數據勾選事件回調參數：function(nodeObj, treeObj)見el-tree組件check事件返回值 - 參數：
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一s樣 -
監聽穿梭組件的添加和移除 -
// 監聽穿梭框組件添加 addBth(fromData,toData,obj){ // 樹形穿梭框模式transfer時，返回參數為左側樹移動后數據、右側樹移動后數據、移動的 {keys,nodes,halfKeys,halfNodes}對象 // 通訊錄模式addressList時，返回參數為右側收件人列表、右側抄送人列表、右側密送人列表 console.log("fromData:", fromData); console.log("toData:", toData); console.log("obj:", obj); }, // 監聽穿梭框組件移除 removeBth(fromData,toData,obj){ // 樹形穿梭框模式transfer時，返回參數為左側樹移動后數據、右側樹移動后數據、移動的{keys,nodes,halfKeys,halfNodes}對象 // 通訊錄模式addressList時，返回參數為右側收件人列表、右側抄送人列表、右側密送人列表 console.log("fromData:", fromData); console.log("toData:", toData); console.log("obj:", obj); } - 參數：
mode說明：設置模式，字段可選值為transfer|addressList類型：String必填：false補充：mode默認為transfer模式，即樹形穿梭框模式，可配置字段為addressList改為通訊錄模式，通訊錄模式時按鈕不可自定義名字，如要自定義標題名在title數組傳入四個值即可，addressList模式時標題默認為通訊錄、收件人、抄送人、密送人 - 參數：
filter說明：是否開啟篩選功能類型：Boolean必填：false - 參數：
openAll說明：是否默認展開全部類型：Boolean必填：false
這是我使用的幾個參數和方法，做一下介紹，具體觀看：https://segmentfault.com/a/1190000015553081
3.接下來就需要使用props傳值啦，需要兩個參數一個是ismentrees2（組件的顯示隱藏）toData(回顯的數據)
4.初始化的時候，請求數據，判斷是否需要右側回顯數據
依賴沒有回顯，so，在請求后數據后，先做一個判斷組件右側是否有數據，有的話，（_this.toData.length > 0) 做了一下去重，當左右側數據相等的時候（_this.toData == data）,右側的數據為空，當沒有選中的數據時，左側的源數據正常顯示，
5.接下來是監聽添加和移除數據，然后保存到頁面中
這個tree組件就算完成，接下來就是在頁面中使用啦
import tree from '@/components/subassembly/tree'; // 參與人員
components:{
tree
}
<tree @setmentree2="setmentree2" :toData="toData" @setmentdata2="setmentdata2" v-if="mentree2" ></tree>
// setmentree2 是tree組件的顯示隱藏
// toData 是右側選中的數據
// setmentdata2 處理組件返回的數據到頁面中
由於給后台傳值傳的是字符串，前端需要一個數組來顯示，所以，做了一下數據處理
最后效果圖一份
