转换效果
initDat=[
{
title: '节点1',
pkey: '-1',
key: '2',
},
{
title: '节点2',
pkey: '2',
key: 'test1',
},
{
title: '节点3',
pkey: '2',
key: 'test2',
}
]
转换为:
data=[
{
title: '节点1',
pkey: '-1',
key: '2',
children: [
{
title: '节点2',
pkey: '2',
key: 'test1',
},
{
title: '节点3',
pkey: '2',
key: 'test2',
}
]
}
]
使用情况
antd的Tree组件
处理函数
/**
* @param data 简单对象数组
*/
createTreeData(data) {
this.treeData = []
if (data.length > 0) {
for (const n of data) {
if (n.pkey === '-1') {
const obj = {
title: n.title,
pkey: n.pkey,
key: n.key,
}
this.treeData.push( obj )
}
}
this.run(data, this.treeData)
} else {
console.log('遍历对象不是一个数组或为一个空数组')
}
return this.treeData
}
/**
* 递归方法 找chiArr的所有子节点
* @param resData
* @param chiArr
*/
run(resData, chiArr) {
if (resData.length !== 0) {
if (chiArr) {
for (const value2 of resData) {
if (value.key === value2.pkey) {
const obj = {
title: value2.title,
pkey: value2.pkey,
key: value2.key,
}
/*如果该节点没有children节点则创建一个,再添加数据,
如果有就直接添加数据*/
if (!value.children) {
value.children = []
}
value.children.push(obj)
}
}
this.run(resData, value.children)
}
}
}
}
/**
* 生成资源目录UI效果
*/
renderTreeNodes = (data) => {
return data.map((item) => {
if (item.children) {
return (
// dataRef={item}
<TreeNode title={item.title} key={item.key} >
{this.renderTreeNodes(item.children)}
</TreeNode>
)
}
return <TreeNode title={item.title} key={item.key} />
})
}
其他方法记录
/**
* 删除数组中指定值的元素
* @param arr 数组
* @param val 要删除的值
*/
deleteArrayItemByValue = (arr, val) => {
for (let i = 0; i < arr.length; i++) {
if (arr[i] === val) {
arr.splice(i, 1)
break
}
}
}