tree树状图表格的呈现，数据结构
Posted Danna123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tree树状图表格的呈现，数据结构相关的知识，希望对你有一定的参考价值。
flattenData()
var flatten = (dt, prefix = ) =>
let data =
const newPrefix = `$prefix.Child`
data[newPrefix] = []
dt.forEach(d =>
if (d.Child)
data[newPrefix] = data[newPrefix].concat(d.Child)
data = ...data, ...flatten(d.Child, newPrefix)
)
return data
const newTableData = 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 || -
渣男代码
以上是关于tree树状图表格的呈现，数据结构的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript：基于任意JSON动态生成树状图（动态生成vue-giant-tree所需idpid）