Question

我想构建一个vue.js2组件来表示树形网格中的以下数据（具有子行的展开/折叠功能）：

{
    "a1": {
        "values": { "cost": 3, "revenue": 5 },
        "subLevel": {
            "b1": {
                "metrics": { "cost": 3, "revenue": 5 },
                "subLevel": {
                    "c1": {
                        "metrics": { "cost": 1, "revenue": 3 },
                    },
                    "c2": {
                        "metrics": { "cost": 2, "revenue": 2 },
                    }
                }
            }
        },
    "a2": {
        "values": { "cost": 5, "revenue": 9 },
        "subLevel": {
            "b3": {
                "metrics": { "cost": 5, "revenue": 9 },
                "subLevel": {
                    "c3": {
                        "metrics": { "cost": 2, "revenue": 4},
                    },
                    "c4": {
                        "metrics": { "cost": 3, "revenue": 5},
                    }
                }
            }
        },
}

我想表达它的方式是这样的（点击父行时折叠/展开）：

Domain  Geo  Browser  Cost  Revenue
 a1                    3       5
         b1            3       5
                c1     1       3
                c2     2       2
 a2                    5       9
         b3            5       9
                c3     2       4
                c4     3       5

我想到的方法是使用递归组件来渲染当前行TR，然后v-for over subLevel渲染子TRs。

问题在于： - 一方面在vue模板中我不能在节点下有多个节点 - 另一方面，我无法通过任何其他html节点（例如div）包装行。

此外，如果我尝试用另一个包裹它们，我当然会得到例外：

不能用作组件根元素，因为它可能包含多个节点。

我知道如何开发这个组件来将我的数据表示为树形网格？

Answer 1

最后，我使用具有显示值的div实现了它：table，table-row，table-column。

这样我就可以使用包装器并仍然享受表行为（例如，将单元格调整为内容，同时为同一列的单元格保留相同的宽度，而不进行任何java脚本DOM操作）。

Vue.js 2 - 渲染子行

1 个答案: