【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;
渣男代码
.titleTop
display: flex;
justify-content: space-between;
.item
display: flex;
line-height: 50px;
.title
min-width: 100px;
text-align: left;
推荐阅读
- 世上根本没有什么感同身受,只有冷暖自知
- HB打包的apk进行升级
- 合并table
- git ------ fatal: No configured push destination. Either specify the URL from the command-line or co
- 使用axios时遇到的Request Method: OPTIONS
- sql case when then else
- 项目启动时报错,Maven Resources Compiler报错
- cannot have character [children], because the type‘s content type
- 字段特别多,只要id跟后端一致,一个方法搞定