<el-tree
:data="treeMenuData"
ref="treeRef"
:props="defaultProps"
highlight-current
node-key="id"
default-expand-all
/>
"result": [
{
"tmSonTask": {
"id": "18a4f244224943cb98ad67bd48874edf",
"title": "NN"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "1eae98fb55444640a68302975a1039c4",
"title": "AAA"
},
"children": [
{
"tmSonTask": {
"id": "6a441ba00ff045bfad017dbe23b9145f",
"title": "FFF"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "84053cf7944f45cf9c706cdc8f12318b",
"title": "BBB"
},
"children": [
{
"tmSonTask": {
"id": "481c4f76ba2143fa835ce392e7d7779a",
"title": "DDD"
},
"children": [
{
"tmSonTask": {
"id": "83fa593ad0c24199937dd43ff22cba6c",
"title": "EEE"
},
"children": [
{
"tmSonTask": {
"id": "134cff35530740eab14dd65950e60997",
"title": "HHH"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "42d52595922a4d67a935b11808449505",
"title": "FFF"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "80d68cffca6442008ff0fd5d7edf9329",
"title": "JJJ"
},
"children": null,
"frontTaskId": null
}
],
"frontTaskId": null
}
],
"frontTaskId": null
}
],
"frontTaskId": null
}
],
"frontTaskId": null
},
{
"tmSonTask": {
"id": "24f7bfe1c7a342f0853f31d92526df22",
"title": "BB"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "45250b323a1b4ebd8249c4abeffa9c24",
"title": "GGG"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "8a3c52591af543b0a3b5e3a16e00962e",
"title": "WSX"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "96e0720dd4b84392a5f0d6e40a6bf8c1",
"title": "nnnnn"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "ac3d22ba8163418985d44589c083be67",
"title": "NNNN"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "b9633ed47ca743d78ec5c848da5acbf3",
"title": "VV"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "ba7e280eb7094624882b3d22da0e2920",
"title": "BBB"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "3abbbd18c9c8407da4bf3f0c3a6b9f42",
"title": "AAA "
},
"children": [
{
"tmSonTask": {
"id": "976b39f2ad394c86948f5f6688ef6aff",
"title": "BB"
},
"children": [
{
"tmSonTask": {
"id": "1cf0c2395c2a42dab7b1b89433838a98",
"title": "CC"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "286472f7be7a4cd49dd1e160561921af",
"title": "CC"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "4a77adcf75094188a5e5826a98073a0d",
"title": "CC"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "72f806b4deeb429dae606486ca5a59d6",
"title": "CC"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "83deca5fd351422aa20bfdae5824b779",
"title": "CC"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "9c697e3b6f8942bc9267c091ff9fff96",
"title": "CC"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "a4d5b018cf484b65b46ff62c885c8eca",
"title": "CC"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "c9e554684c8e4755aede3c80a04b464e",
"title": "CC"
},
"children": null,
"frontTaskId": null
}
],
"frontTaskId": null
},
{
"tmSonTask": {
"id": "a3ed3753c528488689982f79710e3d94",
"title": "BB"
},
"children": [
{
"tmSonTask": {
"id": "10059728139b405e9d31694d184343c5",
"title": "CC"
},
"children": [
{
"tmSonTask": {
"id": "1bed67f3299d4f5a881b84559eb2b987",
"title": "DD"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "afa03c4969be402db6c565908848fddc",
"title": "FF"
},
"children": null,
"frontTaskId": null
},
{
"tmSonTask": {
"id": "c6c290b8b40a462c84e3a147b8654b5e",
"title": "EE"
},
"children": null,
"frontTaskId": null
}
],
"frontTaskId": null
}
],
"frontTaskId": null
}
],
"frontTaskId": null
},
{
"tmSonTask": {
"id": "673405f6cc684e769a0c962f35bde6c3",
"title": "qaz"
},
"children": [
{
"tmSonTask": {
"id": "5c5cd12b585d48cf912d12e4fa9bb845",
"title": "XX"
},
"children": null,
"frontTaskId": null
}
],
"frontTaskId": null
}
],
treeMenuData:[],
defaultProps: {
children: "children",
label: "title",
isLeaf: "leaf"
},
methods:{
/*
使用递归处理下边数据格式
[{
children:[
{
children:[]
}
]
}]
*/
formatRoutes(routerArr){
const arr = [];
routerArr.forEach((item,key) => {
const tmp = { ...item };
if (tmp.children) {
tmp.children = this.formatRoutes(tmp.children);
}
arr[key] = tmp.tmSonTask;
arr[key].children=tmp.children;
})
return arr;
},
/*
需求: 如果children是null或者[] 就直接过滤掉这条数据
不显示到页面上
*/
changenode(data) {
let children = Array.isArray(data.children) && data.children.length > 0
if (children) {
return {
...data,
children: data.children.map(i => this.changenode(i)).filter(i => i)
}
} else {
return null
}
}
}
vue 递归处理tree结构
最新推荐文章于 2023-01-12 13:21:24 发布