I want to render tree data like the following as table
{
name: "node1",
hasChild: true,
children: [
{
name: "node2"
}
]
}becomes
<table>
<tr>
<td>node1<td>
</tr>
<tr>
<td style="padding-left: 12px;">node2<td>
</tr>
</table>if you do it with recursive components, the template must have only one root element. You can"t figure out how to achieve < tr > tiling, so you do something like this:
export default {
functional: true,
render(
createElement,
{
data: {
scopedSlots: {
default: scopedSlots
}
},
props: {
tree,
hasChildProperty = "hasChild",
childrenProperty = "children"
}
}
) {
if (!tree || !scopedSlots) {
return null;
}
const result = [];
walk(tree);
return result;
function walk(tree, level = 0) {
if (!isArray(tree)) {
return;
}
each(tree, node => {
const vNode = scopedSlots({data: node, level: level});
result.push(vNode);
if (node) {
if (node[hasChildProperty] && isArray(node[childrenProperty])) {
walk(node[childrenProperty], level + 1);
}
}
});
}
}use
like this<tbody>
<tree-table-helper :tree="tree">
<template slot-scope="node">
<tr>
<td :style="{paddingLeft: node.level + "em"}">{{node.data.name}}</td>
</tr>
</template>
</tree-table-helper>
</tbody>although this can be achieved, after drawing a tree with 1000 nodes in chrome, adding and deleting a node will stutter for hundreds of milliseconds. The first execution of, render () in chrome will take more than half a second, and then multiple execution will be optimized to tens of milliseconds by magic. It should be diff or patch. I can"t think of how to optimize it. Without magic optimization under ie, the whole jam will burst
.