在vue專案中使用樹形結構的穿梭框

先看一下最後的效果：

樹型結構的穿梭框，基於element-ui

一個基於elementui的穿梭框元件：el-tree-transfer

第一步：安裝元件

npm install el-tree-transfer --save

第二步：寫程式碼

<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>

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);

}

},

components:{ treeTransfer } // 註冊

}

</script>

<style>

...

</style>

把上面的程式碼寫完之後，就可以了哦。

引數說明：

引數：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模式時返回引數為右側收件人列表、右側抄送人列表、右側密送人列表

在vue專案中使用樹形結構的穿梭框

相關文章