本文最后更新于 468 天前,其中的信息可能已经有所发展或是发生改变。
1、React将数据转化成树形结构
// 初始数据
let result = [
{ parentId: null, id: 1, name: "书籍", count: 100 },
{ parentId: 1, id: 2, name: "西游记", count: 50 },
{ parentId: 1, id: 3, name: "红楼梦", count: 10 },
{ parentId: 1, id: 4, name: "水浒传", count: 20 },
{ parentId: 1, id: 5, name: "三国演义", count: 20 },
{ parentId: null, id: 6, name: "文具", count: 10 },
{ parentId: 6, id: 7, name: "铅笔", count: 5 },
{ parentId: 6, id: 8, name: "橡皮", count: 5 },
];
const getTreeData = (treeData, parentId) => {
// 把数据转化为树型结构
let tree = [];
let currentParentId = parentId || null;
for (let i = 0; i < treeData.length; i += 1) {
if (treeData[i]) {
if (treeData[i].parentId === currentParentId) {
tree.push(treeData[i]);
}
}
}
for (let j = 0; j < tree.length; j += 1) {
if (tree[j]) {
let children = getTreeData(treeData, tree[j].id);
if (children && children.length) {
tree[j].children = children;
}
}
}
return tree;
};
// 树形数据
let data = getTreeData(result);
console.log(data);
/*[
{
parentId: null,
id:1,
name:'书籍',
count:100,
children:[
{parentId:1,id:2,name:'西游记',count: 50},
{parentId:1,id:3,name:'红楼梦',count: 10},
{parentId:1,id:4,name:'水浒传',count: 20},
{parentId:1,id:5,name:'三国演义',count: 20},
]
},
{
parentId: null,
id:6,
name:'文具',
count:10,
children:[
{parentId:6,id:7,name:'铅笔',count:5},
{parentId:6,id:8,name:'橡皮',count:5},
]
}
]*/
2、实例(react antd table树形数据)
import React, { useState, useEffect } from 'react';
import { Table } from 'antd';
const Test = () => {
const [expandedRowKeys, setExpandedRowKeys] = useState([]);
const [dataSource, setDataSource] = useState([]);
const columns = [
{
title: '名称',
key: 'name',
dataIndex: 'name',
},
{
title: '描述',
key: 'desc',
dataIndex: 'desc',
},
];
const onExpandTable = (expanded, record) => {
let arr = expandedRowKeys;
if (expanded) {
arr.push(record.id);
} else {
arr.splice(
arr.findIndex((i) => i === record.id),
1
);
}
setExpandedRowKeys(arr);
};
const getTreeData = (treeData, parentId) => {
// 把数据转化为树型结构
let tree = [];
let currentParentId = parentId || null;
for (let i = 0; i < treeData.length; i += 1) {
if (treeData[i]) {
if (treeData[i].parentId === currentParentId) {
tree.push(treeData[i]);
}
}
}
for (let j = 0; j < tree.length; j += 1) {
if (tree[j]) {
let children = getTreeData(treeData, tree[j].id);
if (children && children.length) {
tree[j].children = children;
}
}
}
return tree;
};
useEffect(() => {
const res = [
{
parentId: null,
id: '0e02f058-65fc-4e47-82d5-3aaf95f816cd',
name: '中国',
desc: '中国陆地面积约9600000平方千米',
},
{
parentId: '0e02f058-65fc-4e47-82d5-3aaf95f816cd',
id: '03014a12-3948-4f8a-b182-ed8b6d58a7ea',
name: '四川',
desc: '四川地域面积约486000平方公里',
},
{
parentId: '0e02f058-65fc-4e47-82d5-3aaf95f816cd',
id: '201f9c09-f2e8-4bea-917e-b5fdc56d9e24',
name: '山东',
desc: '陆域面积约155800平方公里',
},
{
parentId: '03014a12-3948-4f8a-b182-ed8b6d58a7ea',
id: '305d7648-9e3e-4b25-a246-3be08344434e',
name: '成都',
desc: '成都地域面积约14335平方公里',
},
{
parentId: '201f9c09-f2e8-4bea-917e-b5fdc56d9e24',
id: '3898961f-7487-46d6-8595-f2dfac59b116',
name: '济南',
desc: '济南地域面积约10244.45平方公里',
},
];
let data = getTreeData(res);
console.log('data: ', data);
setDataSource(data);
}, []);
return (
<>
<Table
columns={columns}
dataSource={dataSource}
rowKey={(record) => record.id}
expandedRowKeys={expandedRowKeys}
onExpand={onExpandTable}
pagination={false}
/>
</>
);
};
export default Test;
感谢分享