tree树状图表格的呈现，数据结构 _数据

【tree树状图表格的呈现，数据结构】学向勤中得，萤窗万卷书。这篇文章主要讲述tree树状图表格的呈现，数据结构相关的知识，希望能为你提供帮助。

flattenData()
var flatten = (dt, prefix = ) =>
let data = https://www.songbingjia.com/android/
const newPrefix = `$prefix.Child`
data[newPrefix] = []
dt.forEach(d =>
if (d.Child)
data[newPrefix] = data[newPrefix].concat(d.Child)
data =https://www.songbingjia.com/android/...data, ...flatten(d.Child, newPrefix)

)
return data

const newTableData = https://www.songbingjia.com/android/this.tableData.map(d1 =>
return...d1, ...flatten(d1.Child, Child)
)

tableData: [
ItemName: 7.1技术要求,
Id: 12354665845,
has_child: 1,
Child: [
ItemName: 7.1.1基本保护要求,
Id: 12355845,
has_child: 1,
Child: [
ItemName: 7.1.1.1物理隔离,
Id: 12355845,
has_child: 0,
Child: [],
testItems:[
name: 评测方法一,
result: good,
score: 98
,
name: 评测方法二,
result: good,
score: 98
]
,
ItemName: 7.1.1.2安全保密产品选择,
Id: 125845555,
has_child: 0,
Child: [],
testItems:[
name: 评测方法一,
result: good,
score: 98
,
name: 评测方法二,
result: good,
score: 98
,
name: 评测方法三,
result: good,
score: 98
]
,
ItemName: 7.1.1.3安全边界防护,
Id: 125822445,
has_child: 0,
Child: [],
testItems:[
name: 评测方法一,
result: good,
score: 98
]
,
ItemName: 7.1.1.4密级标识,
Id: 124445845,
has_child: 0,
Child: [],
testItems:[
name: 评测方法一,
result: good,
score: 98
,
name: 评测方法二,
result: good,
score: 98
,
name: 评测方法三,
result: good,
score: 98
]
]
,

ItemName: 7.1.2物理安全,
Id: 1235555845,
has_child: 1,
Child: [
ItemName: 7.1.2.1物理安全防护,
Id: 1235555845,
has_child: 0,
Child: [],
testItems:[
name: 评测方法一,
result: good,
score: 98
,
name: 评测方法二,
result: good,
score: 98
,
name: 评测方法三,
result: good,
score: 98
]
,
ItemName: 7.1.2.2物理产品选择,
Id: 12545845,
has_child: 0,
Child: [],
testItems:[
name: 评测方法一,
result: good,
score: 98
,
name: 评测方法二,
result: good,
score: 98
,
name: 评测方法三,
result: good,
score: 98
]
]
]
,
ItemName: 7.2管理要求,
Id: 1265845,
has_child: 1,
Child: [
ItemName: 7.2.1基本管理要求,
Id: 12355845,
has_child: 1,
Child: [
ItemName: 7.2.1.1管理1,
Id: 12355845,
has_child: 0,
Child: [],
testItems:[
name: 评测方法一,
result: good,
score: 98
,
name: 评测方法二,
result: good,
score: 98
,
name: 评测方法三,
result: good,
score: 98
]
,
ItemName: 7.2.1.2管理3,
Id: 125845,
has_child: 0,
Child: [],
testItems:[
name: 评测方法一,
result: good,
score: 98
,
name: 评测方法二,
result: good,
score: 98
,
name: 评测方法三,
result: good,
score: 98
]
,
ItemName: 7.2.1.3管理3,
Id: 125845,
has_child: 0,
Child: [],
testItems:[
name: 评测方法一,
result: good,
score: 98
]
]
,
ItemName: 7.2.2管理项目,
Id: 12355845,
has_child: 1,
Child: [
ItemName: 7.2.2.1管理项目1,
Id: 12355845,
has_child: 0,
Child: [],
testItems:[
name: 评测方法一,
result: good,
score: 98
,
name: 评测方法二,
result: good,
score: 98
]
]
,
ItemName: 7.3其他要求,
Id: 12658dd45,
has_child: 1,
Child: [
ItemName: 7.3.1基本管理要求,
Id: 12355845,
has_child: 0,
testItems:[
name: 评测方法一,
result: good,
score: 98
,
name: 评测方法二,
result: good,
score: 98
]
,
ItemName: 7.3.2管理项目,
Id: 12355845,
has_child: 1,
Child: [
ItemName: 7.3.2.1管理项目1,
Id: 12355845,
has_child: 0,
Child: [],
testItems:[
name: 评测方法一,
result: good,
score: 98
,
name: 评测方法二,
result: good,
score: 98
]
]
]
]
],

测评第一项测评项测评n项测评不知道项
item.ItemName
subItem.ItemName

subItem.ItemName

subItem.ItemName

测评第一项	测评项	测评n项	测评不知道项
item.ItemName	subItem.ItemName	subItem.ItemName	subItem.ItemName

h3
margin: 40px 0 0;

.fake-cell
border-bottom: 1px solid black;
height: 40px;

ul
list-style-type: none;
padding: 0;

li
display: inline-block;
margin: 0 10px;

a
color: #42b983;