<template>
<div>
<tree-transfer
: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 default {
components: { treeTransfer }, // 注册
data() {
return {
mode: "transfer", // transfer addressList
check:[
{
"id": "1",
"pid": 0,
"label": "一级 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"
}
]
}
]
}
],
fromData: [],
resForm: [
{
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: [],
};
},
mounted(){
// this.fromData=this.resForm
this.toData=this.check
this.handlea()
// this.fromData=this.differenceTree()
},
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);
},
handlea(){
const ids = [];
function getIds(array) {
for (let i = 0; i < array.length; i++) {
const element = array[i];
ids.push(element.id);
if (element.children && element.children.length > 0) {
getIds(element.children);
}
}
}
if (this.toData.length > 0) {
getIds(JSON.parse(JSON.stringify(this.toData)));
this.fromData = this.differenceTree(ids, JSON.parse(JSON.stringify(this.resForm)));
console.log(this.fromData);
return;
}
},
//树过滤
differenceTree(ids, arr) {
const newarr = [];
arr.forEach((element) => {
if (ids.indexOf(element.id) == -1) {
// 判断条件
newarr.push(element);
} else if (element.children && element.children.length > 0) {
const redata = this.differenceTree(ids, element.children);
if (redata && redata.length > 0) {
const obj = {
...element,
children: redata,
};
newarr.push(obj);
}
}
});
return newarr;
},
},
};
</script>
<style>
</style>
