PrimeNG：统一p-accordion尺寸并禁用p-splitter拖拽调整

1. 统一所有p-accordion的高度为最高项的高度 #

因为内容是动态加载的，需要在内容渲染完成后计算所有accordion的高度，再统一设置最大值。

实现步骤： #

• 在组件中用ViewChildren获取所有accordion的DOM引用
• 在数据加载完成或视图更新后，计算所有accordion的高度，取最大值并统一设置

组件代码：

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChildren('accordionRef') accordionElements!: QueryList<ElementRef>;

  // 数据加载完成后调用此方法
  onDataLoaded() {
    // 延迟执行确保DOM已更新
    setTimeout(() => this.syncAccordionHeights(), 0);
  }

  syncAccordionHeights() {
    if (!this.accordionElements.length) return;

    // 获取所有accordion的高度
    const heights = this.accordionElements.map(el => el.nativeElement.offsetHeight);
    const maxHeight = Math.max(...heights);

    // 给所有accordion设置最大高度
    this.accordionElements.forEach(el => {
      el.nativeElement.style.height = `${maxHeight}px`;
    });
  }
}

模板代码：

给每个p-accordion添加模板引用变量#accordionRef：

<p-splitter>
  <p-splitterPanel>
    <p-accordion #accordionRef>
      <p-accordionTab header="Tab 1">
        <p-table [value]="data1"></p-table>
      </p-accordionTab>
    </p-accordion>
  </p-splitterPanel>
  <p-splitterPanel>
    <p-accordion #accordionRef>
      <p-accordionTab header="Tab 2">
        <p-table [value]="data2"></p-table>
      </p-accordionTab>
    </p-accordion>
  </p-splitterPanel>
  <p-splitterPanel>
    <p-accordion #accordionRef>
      <p-accordionTab header="Tab 3">
        <p-table [value]="data3"></p-table>
      </p-accordionTab>
    </p-accordion>
  </p-splitterPanel>
</p-splitter>

注意：如果后续有内容动态变化（比如表格数据更新、accordion展开/收起），需要再次调用syncAccordionHeights()方法重新计算高度。

2. 禁用p-splitter的拖拽调整功能 #

有两种简单的实现方式：

方式一：CSS全局禁用（快速生效） #

通过CSS阻止gutter的交互事件，直接禁用拖拽：

/* 仅针对当前组件的splitter，可添加组件类名前缀 */
.p-splitter .p-splitter-gutter {
  pointer-events: none;
  cursor: default;
}

方式二：使用组件属性（精准控制） #

PrimeNG 14及以上版本中，p-splitterPanel支持resizable属性，设置为false即可禁用对应面板的拖拽调整：

<p-splitter>
  <p-splitterPanel [resizable]="false">
    <!-- 内容 -->
  </p-splitterPanel>
  <p-splitterPanel [resizable]="false">
    <!-- 内容 -->
  </p-splitterPanel>
  <p-splitterPanel [resizable]="false">
    <!-- 内容 -->
  </p-splitterPanel>
</p-splitter>

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