当使用el-tree自定义节内容时候(用户自定义,有多少层级不确定的),我们得到的数据是含children的树形结构的数据,后端并不需要这种类型的数据,这时候我们需要将数据 扁平化。
注:通常情况下 扁平化的数据包含 该节点的label 该节点的id 该节点的parentId(用来确定该节点的层级。初始节点的parentId可为0或者null)。
若以下为初始节点的数据。那么他的子节点的 parentId 为该节点的 id 也就是1
{ //初始化数据源
id: 1,
label: "数据源",
parentId: null,
},
当自定义节点数据后得到一下树形结构数据;
采用 递归 方法将数据 扁平化
methods:{
//递归 tree为生成的树形结构数据
treeToList(tree) {
let arr = [];
for (const item of tree) {
if (item.children && item.children.length > 0) {
let sitem = { ...item };
delete sitem.children;
arr = arr.concat(sitem, this.treeToList(item.children));
} else {
delete item.children;
arr.push(item);
}
}
return arr;
},
}
得到如下数据: