<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",
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",
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.toData=this.check
this.handlea()
},
methods: {
changeMode() {
if (this.mode == "transfer") {
this.mode = "addressList";
} else {
this.mode = "transfer";
}
},
add(fromData, toData, obj) {
console.log("fromData:", fromData);
console.log("toData:", toData);
console.log("obj:", obj);
},
remove(fromData, toData, obj) {
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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!