垫树遇到CSS网格

Question

如何将looooooooooooooooong复选框树分解为更易用的网格布局？

问题是没有分组包装器，只有一些表示组关联的填充。

STACKBLITZ

可能的例子似乎破坏了树的功能……但是，这更多的是styling - issue。

如何使第一种情况"look and feel"像秒一样？

mat-tree上的样式

• style="display: grid; grid-template-columns: 1fr 1fr 1fr"

Answer 1

恐怕对于像您的示例中的那棵扁树来说，实现这种行为是不可能的。但是，您可以使用mat-nested-tree-node创建嵌套树。看一下垫树examples section中的“带有嵌套节点的树” 示例。也可以使用StackBlitz implementation。