带水平滚动的 p-splitter 和 p-table

Question

我需要垂直拆分页面（例如 60%:40%）到两个区域，并且拆分器必须可拖动。所以我选择了 PrimeNG p-splitter。右侧区域包含带有水平滚动条的 p-table（基于文档： https: //www.primefaces.org/primeng/showcase/#/table/scroll部分：“水平和垂直”）：

<p-splitter [panelSizes]="[60,40]" [style]="{'height': '400px'}">
  <ng-template pTemplate>

    <p-table [value]="cars" [scrollable]="true" [style]="{width:'600px'}" scrollHeight="200px">
    ...
    </p-table>

  </ng-template>
  <ng-template pTemplate>
    Panel 2
  </ng-template>
</p-splitter>

问题是表格宽度绑定为 600px 并且：

1. 无法将拆分器拖动到右侧（表格不允许）
2. 当拆分器向左拖动时，表格宽度保持 600px（因此表格和拆分器之间有无用的空白空间）。

StackBlitz 上的项目

https://stackblitz.com/edit/primeng-splitter-and-datatable

完整代码

<p-splitter [panelSizes]="[60,40]" [style]="{'height': '400px'}">
  <ng-template pTemplate>

    <p-table [value]="cars" [scrollable]="true" [style]="{width:'600px'}" scrollHeight="200px">

      <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
          <col style="width:250px">
          <col style="width:250px">
          <col style="width:250px">
          <col style="width:250px">
        </colgroup>
      </ng-template>

      <ng-template pTemplate="header">
        <tr>
          <th>Vin</th>
          <th>Year</th>
          <th>Brand</th>
          <th>Color</th>
        </tr>
      </ng-template>

      <ng-template pTemplate="body" let-car>
        <tr>
          <td>{{car.vin}}</td>
          <td>{{car.year}}</td>
          <td>{{car.brand}}</td>
          <td>{{car.color}}</td>
        </tr>
      </ng-template>
    </p-table>

  </ng-template>
  <ng-template pTemplate>
    Panel 2
  </ng-template>
</p-splitter>

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  cars: any[] = [];

  ngOnInit(): void {
    this.cars = [
      {
        vin: 1001,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1002,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1003,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1004,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1005,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      }
    ];
  }
}

Answer 1

我遇到了同样的问题，并且能够找到解决方法。它并不完美，但目前对我来说还可以。

您可以为表格指定一个 max-width 属性，并在 Splitter 模块发出 onResizeEnd 事件时重新计算它。对我来说，它看起来像这样：

import { Component, ViewChild } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
import { Splitter } from 'primeng/splitter';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  cars: any[] = [];

  @ViewChild('pSplitter') pSplitter: Splitter;
  public widthHelper = '300px';

  ngOnInit(): void {
    this.cars = [
      {
        vin: 1001,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1002,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1003,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1004,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1005,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      }
    ];
  }

  public recalculateSlider(event) {
    this.widthHelper =  0.01 * this.pSplitter._panelSizes[0] /*percent of the panel width*/ * 600 * /*width of the panel component*/ - 4 /*width of the splitter*/+ 'px';
  }
}

<p-splitter #pSplitter [style]="{'height': '400px', 'width': '600px'}" [panelSizes]="[50,50]"
  (onResizeEnd)="recalculateSlider($event)">

  <ng-template pTemplate>
    <p-table [value]="cars" [scrollable]="true" [ngStyle]="{'max-width': widthHelper}" scrollHeight="400px">

      <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
          <col style="width:250px">
          <col style="width:250px">
          <col style="width:250px">
          <col style="width:250px">
        </colgroup>
      </ng-template>

      <ng-template pTemplate="header">
        <tr>
          <th>Vin</th>
          <th>Year</th>
          <th>Brand</th>
          <th>Color</th>
        </tr>
      </ng-template>

      <ng-template pTemplate="body" let-car>
        <tr>
          <td>{{car.vin}}</td>
          <td>{{car.year}}</td>
          <td>{{car.brand}}</td>
          <td>{{car.color}}</td>
        </tr>
      </ng-template>
    </p-table>

  </ng-template>
  <ng-template pTemplate>
    Panel 2
  </ng-template>
</p-splitter>

仅当您放开拆分器时，表格的宽度才会更新，但至少功能仍然存在。

这是 StackBlitz 上该项目的链接 https://stackblitz.com/edit/primeng-splitter-and-datatable-hq9qeo