后端返回的数据需要自己封装(循环/递归)
1.返回的数据是对象结构 修改为TreeSelect需要的数据结构
举例:
data = {
name: "aaa",
id: "bbb",
children: [
{
name: "ccc",
id: "ccc"
}
...
]
}
修改:
const parseTree = (data, tree) => {
tree.title = data.name;
tree.value = data.id;
//构建子节点
var subTree = data.child;
if (!subTree || subTree.length === 0) {
return tree
} else {
var children = new Array();
for (var i = 0, len = subTree.length; i < len; i++) {
var child = new Object();
child = parseTree(subTree[i], child)
children.push(child)
}
tree.child = children;
return tree
}
}
console.log(parseTree(treedata,{}))
//这里出来是对象 所以在使用的时候用一个空array push一下就可以了
2.返回的数据是数组对象 (目前我只用到两层 所以直接用了循环进行了数据修改)
返回数据:
data = [
{
name: "aaa",
id: "aaa",
children: [
{
name: "ccc",
id: "ccc"
}
...
]
}
{
name: "eee",
id: "eee",
children: [
{
name: "ddd",
id: "ddd"
}
...
]
}
]
let nodeData = [];
this.props.data && this.props.data.map((item) => {
let treeObj = {};
treeObj.title = item.alias;
treeObj.value = item.path;
let children = []
item.child && item.child.map((item1) => {
let tree = {};
tree.title = item1.alias;
tree.value = item1.path;
children.push(tree)
treeObj.children = children
})
nodeData.push(treeObj)
})
console.log(nodeData)
3.多层(大于2)列表展示(有时候会报错 找不太到原因)
const handleTreeData = (treeData) => {
let nodeData = [];
treeData.map(item => {
let treeObj = {};
treeObj.title = item.name;
treeObj.value = item.id;
item.child ? treeObj.children = this.handleTreeData(item.child) : null;
nodeData.push(treeObj);
})
return nodeData;
}
注意:从后端拿回来的数据。确保你在转化的时候时候拿到了数据,多层那个方法不知道有没有数据的问题,只有两层也使用了递归的方法但是总会报错,错误为treeData.map()not a function,不知道什么原因,路过大佬求帮忙看一下~