如何设置 p-tree 的宽度以填充可用空间？答案

【问题标题】：how do I set the width of p-tree to fill the available space?如何设置 p-tree 的宽度以填充可用空间？
【发布时间】：2020-03-09 07:27:25
【问题描述】：

我无法正确设置宽度来填充p-treeprimeng 控件的可用空间。当我手动执行此操作时，它在 chrome devtools 中有效，但当我在组件的样式文件中执行此操作时无效。

Stackblitz 链接：

无论如何，树都会保持 18em 的宽度。提前谢谢你。

html代码：

<p-tree [value]=filesTree1></p-tree>

css代码：

.ui-tree {
  width: 100%;
}

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

【解决方案1】：

可以使用p-tree控件的styleClass属性。

<p-tree [value]=filesTree1 [styleClass]="'my-tree'"></p-tree>

在 tree.scss 文件中添加下面的 css。

:host ::ng-deep .ui-tree.my-tree {
  width: 100%;
}

【讨论】：