2

我也在 GitHub 上提到了这个问题，但还没有人回答，所以我想在这里寻求帮助：

我使用带有可调整大小列的 Turbo-Table 并将 [scrollable] 属性设置为 false，并且我的表是在 Microsoft Edge 和 Internet Explorer 11 浏览器（Chrome 和 FireFox 正确处理）上使用不必要的垂直和水平滚动条创建的。有谁知道如何摆脱这些多余的滚动条？

一些环境细节：

PrimeFaces version: 5.2.4 (Also occurs on last version (6-Alpha))
Browsers: Microsoft Edge 42.17134.1.0, Microsoft IE11.0.65 (Works well on Chrome and FireFox)

重现步骤：

构建一个简单的文本数据表，大约 10 行，具有可调整大小的列和 [scrollable]="false"

代码如下：

app.component.html

<p-table [value]="cars" [resizableColumns]="true" [scrollable]="false">
  <ng-template pTemplate="header">
    <tr>
      <th *ngFor="let col of cols" pResizableColumn>
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-car>
    <tr>
      <td *ngFor="let col of cols" class="ui-resizable-column">
        {{car[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>

app.component.ts

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

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

  constructor() {
  }

  cars: any[];

  cols: any[];

  ngOnInit() {
    this.cars = [
      {vin: '11', year: '1111', brand: 'dddd', color: 'blue', madeIn: 'Japan'},
      {vin: '12', year: '1112', brand: 'aaaa', color: 'green', madeIn: 'Germany'},
      {vin: '13', year: '1113', brand: 'cccc', color: 'yellow', madeIn: 'Japan'},
      {vin: '14', year: '1114', brand: 'dddd', color: 'blue', madeIn: 'Japan'},
      {vin: '15', year: '1115', brand: 'aaaa', color: 'green', madeIn: 'Korea'},
      {vin: '16', year: '1116', brand: 'cccc', color: 'black', madeIn: 'China'},
      {vin: '17', year: '1117', brand: 'dddd', color: 'blue', madeIn: 'USA'},
      {vin: '18', year: '1118', brand: 'aaaa', color: 'green', madeIn: 'Japan'},
      {vin: '19', year: '1119', brand: 'cccc', color: 'grey', madeIn: 'Germany'},
      {vin: '20', year: '1120', brand: 'dddd', color: 'blue', madeIn: 'France'},
    ];

    this.cols = [
      {field: 'vin', header: 'Vin'},
      {field: 'year', header: 'Year'},
      {field: 'brand', header: 'Brand'},
      {field: 'color', header: 'Color'},
      {field: 'madeIn', header: 'Made In'}
    ];
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import {TableModule} from 'primeng/table';
import {AppComponent} from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
4

2 回答 2

3

使用 PrimeNG 6.1.0，这个确切的问题看起来已修复。[autoLayout]="true"但是当我用来制作未固定的列时，我遇到了同样的问题。该问题出现在 style 类ui-table-wrapper中，它具有 style overflow-x: auto，并在 IE 中显示水平和垂直滚动条。作为一种解决方法，我添加了样式类来覆盖 CSS 中的这种行为：

.non-scrollable-table .ui-table-wrapper {
     overflow-x: visible !important;
}

并将此类添加到 div 之前p-table的标记为：

<div class="non-scrollable-table">
    <p-table
       ...
    </p-table>
</div>

这应该会有所帮助。

由于 PrimeNG 组件中使用的 IE11 中缺少字体，也会出现更新问题。可以通过向 CSS 添加字体来修复它：

*::-ms-backdrop, .ui-widget {
    font-family: "Segoe UI", "Roboto", "Trebuchet MS", Arial, Helvetica, sans-serif;
 }

添加此字体还可以修复 IE11 中的一些其他样式问题。

于 2018-09-11T10:52:02.850 回答
0

感谢你的回答！我通过使用 flex 成功绕过了这个问题：

.my-table,
.my-table .ui-table,
.my-table .ui-table-scrollable-wrapper,
.my-table .ui-table-scrollable-view,
.my-table .ui-table-scrollable-body
{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.my-table {
  ui-table-scrollable-body {
    overflow-y: auto;
  }
}

我保留了[scrollable]="true"p 表的参数。

我想要的行为是表格的主体将根据页面大小尽可能增长，如有必要，使用垂直滚动条。我认为这解决了问题。

顺便说一句：像我一样编写 flex 定义，Edge 和 Explorer 不理解快捷方式 flex: 1 1 0

于 2018-09-12T05:46:37.007 回答