水平滚动的 p-splitter & p-table答案

【问题标题】：p-splitter & p-table with horizontal scroll水平滚动的 p-splitter & p-table
【发布时间】：2021-05-28 18:49:43
【问题描述】：

我需要将页面垂直拆分（例如 60%:40%）到两个区域，并且拆分器必须是可拖动的。所以我选择了 PrimeNG p-splitter。右侧区域包含带有水平滚动条的 p 表（基于 doc：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并且：

无法向右拖动拆分器（表格不允许）
当拆分器向左拖动时，表格宽度保持在 600 像素（因此表格和拆分器之间有无用的空白）。

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'
      }
    ];
  }
}

【问题讨论】：

如果您在 StackBlitz 中重新创建问题并添加链接，则更有可能有人会尝试解决它
@Drenai 谢谢你的意见。我已经尝试过，但出现错误“ngcc 无法在primeng@11.3.2 上运行”。现在我在那里分叉了一些其他 PrimeNG 项目，并在 StackBlitz 的链接中更新了原始问题。
我看了看，但我不太明白这个问题-not able to fix both points 是什么意思
@Drenai 我添加了图片，并删除了你提到的这个不清楚的句子。希望现在更清楚了。谢谢
@sasynkamil 您找到解决方案了吗？我有同样的问题..

标签： angular primeng-datatable

【解决方案1】：

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

您可以给表格一个最大宽度属性，并在拆分器模块发出 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

【讨论】：