场景： 我们现在有一个树状结构的数据，如下图：
大概的数据结构如下：
const tree = {
value: '根节点', children: [ { value: '学校', children: [ { value: '学生', children: [ { value: '年龄', children: [ { value: '身高' } ] } ] } ...... ] } ] } - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
现在我们要将这样的数据转为行数据, 并用vue将其渲染为table， 效果如下：
OK，下面我们一一进行解析。
第一步，递归树状结构，转化为行数据
parseTreeToRow(node, data = [], row = []) { if (!node.children) { data.push(row); } else { for (let i = 0; i < node.children.length; i++) { const child = node.children[i]; const cell = { value: child.value }; this.parseTreeToRow(child, data, [...row, cell]); } } return data; }; //通过上面的递归函数，解析出来的行数据如下： const data = [ [{ value: '学校'}, { value: '学生' }, { value: '年龄' }, { value: '身高' }], [{ value: '成都一中'}, { value: '张三' }, { value: '17' }, { value: '170' }], [{ value: '成都二中'}, { value: '李四' }, { value: '17' }, { value: '174' }], [{ value: '成都二中'}, { value: '王五' }, { value: '18' }, { value: '168' }], [{ value: '成都二中'}, { value: '王五' }, { value: '19' }, { value: '177' }], ...... ]; - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
第二步，添加rowspan信息
此时，很明显渲染出来的table并没有进行合并，如果对解析后的行数据二次解析亦可找到其rowspan，这里不做二次解析，我们回到上面的递归函数中，做如下处理：
parseTreeToRow(node, data = [], row = []) { if (!node.children) { data.push(row); } else { for (let i = 0; i < node.children.length; i++) { const child = node.children[i]; const cell = { value: child.value， rowspan: this.computeLeafCount(node) }; this.parseTreeToRow(child, data, [...row, cell]); } } return data; }; /** 1. 计算某个节点下叶子节点的数量 2. @param { Object } node 节点 3. @returns { Number } leafCount 叶子节点的数量 */ computeLeafCount(node) { if(!node.children){ node.rowspan = 1; return 1; } else { let leafCount = 0; for(let i = 0 ; i < node.children.length ; i++) { leafCount = leafCount + this.computeLeafCount(node.children[i]); } node.rowspan = leafCount; return leafCount; } } //解析出的数据如下： const data = [ [{ value: '学校', rowspan: 7 }, { value: '学生', rowspan: 1 }, { value: '年龄', rowspan: 1 }, { value: '身高', rowspan: 1 }], [{ value: '成都一中', rowspan: 7 }, { value: '张三', rowspan: 1 }, { value: '17', rowspan: 1 }, { value: '170', rowspan: 1 }], [{ value: '成都二中', rowspan: 7 }, { value: '李四', rowspan: 3 }, { value: '17', rowspan: 1 }, { value: '174', rowspan: 1 }], [{ value: '成都二中', rowspan: 7