如何解决PrimeNG新p-splitter内p-tree无法占满分配空间的问题？

问题原因 #

p-tree默认自带内容区内边距，且自身不会自动撑满父级分配的容器空间；同时p-splitter的分栏容器默认不会向下传递高度值，嵌套多层组件时很容易出现高度链路中断，最终导致p-tree无法100%填满栏位。

解决方法 #

1. 补全分栏的高度链路 #

p-splitter如果只设置height: auto，分栏高度会完全由内部内容撑开，拖动分栏时无法自动适配剩余空间。需要给p-splitter设置明确的可视高度，同时逐层给嵌套的组件设置100%高度：

<!-- 调整后的布局代码示例 -->
<p-splitter [style]="{'height': 'calc(100vh - 120px)'}">
  <ng-template pTemplate>
    <p-panel styleClass="h-full">
      <p-header>
          <app-searchbar></app-searchbar>
          <app-filter></app-filter>
      </p-header>
      <app-tree styleClass="h-full"></app-tree>
    </p-panel>
  </ng-template>
  <ng-template pTemplate>
    <app-details></app-details>
  </ng-template>
</p-splitter>

2. 清除p-tree的默认内边距 #

p-tree默认在内容区域设置了padding: .25rem的内边距，是导致组件和父容器出现空隙的直接原因。需要在全局样式文件中覆盖默认值：

.p-tree {
  padding: 0 !important;
  height: 100%;
}

3. 适配自定义封装组件的高度 #

内部封装p-tree的app-tree组件，需要在自身根节点设置100%高度，避免高度传递中断：

<!-- app-tree内部根节点 -->
<div class="h-full">
  <p-tree [value]="treeData"></p-tree>
</div>

注意事项 #

• p-panel自带的默认内边距如果造成布局空隙，可以给p-panel加styleClass="p-0"清除内边距
• 不要在组件的scoped样式中写p-tree的覆盖样式，必须把覆盖规则放到全局样式入口文件中，否则会被Angular的样式隔离机制拦截，样式不生效

内容的提问来源于stack exchange，提问作者dirtyw0lf