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

Question

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

Stackblitz 链接：

https://stackblitz.com/edit/angular6-primeng-gjz1po

无论如何，树都会保持 18em 的宽度。 先感谢您。

html 代码：

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

css 代码：

.ui-tree {
  width: 100%;
}

Answer 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%;
}