时间戳

首页 > 解决方案 > 如何阻止 mat-table 调整其列的大小？

html - 如何阻止 mat-table 调整其列的大小？

问题描述

我正在使用 angular material io 中的 mat-table 及其分页器。我目前正在尝试从工作伙伴的不同项目中克隆设计。但是，正如您希望在图片中看到的那样，我有 18 行，最多显示 5 行。当我单击按钮查看接下来的 5 行时，“Stammnummer”和“Bereich”列将向右移动几厘米，如果我再次单击，它们将向左移动一点。我希望你能在图片中看到这一点。

它可能会移动，因为“Standort”中的字符串有时更长或更短。但我知道有一种方法可以阻止其他列受此影响。我只是不知道怎么做。

在此处输入图像描述

在此处输入图像描述

那是我的代码：

表分页组件.ts：

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';


@Component({
  // tslint:disable-next-line: component-selector
  selector: 'table-paginator',
  styleUrls: ['table-paginator.component.css'],
  templateUrl: 'table-paginator.component.html',
})
export class TablePaginatorComponent implements OnInit {
  displayedColumns: string[] = ['standort', 'stammnummer', 'bereich'];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
  }
}

export interface PeriodicElement {
  standort: string;
  stammnummer: string;
  bereich: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {standort: 'Düsseldorf', stammnummer: '0271-8678', bereich: '000-999'},
  {standort: 'Köln FD', stammnummer: '0271-2909', bereich: '000-499'},
  {standort: 'Köln BD', stammnummer: '0271-846233', bereich: '00-99'},
  {standort: 'Dortmund', stammnummer: '0271-9234', bereich: '000-599'},
  {standort: 'Münster', stammnummer: '0257-543', bereich: '000-799'},
  {standort: 'Leipzig', stammnummer: '079-88544', bereich: '000-999'},
  {standort: 'Dresden', stammnummer: '0371-9888', bereich: '000-499'},
  {standort: 'Hamburg', stammnummer: '0371-8788', bereich: '000-499'},
  {standort: 'Hannover', stammnummer: '070-32888', bereich: '000-999'},
  {standort: 'Mannheim', stammnummer: '0571-3388', bereich: '000-499'},
  {standort: 'Frankfurt', stammnummer: '0671-4077', bereich: '000-499'},
  {standort: 'Stuttgart FD', stammnummer: '079-2773', bereich: '000-499'},
  {standort: 'Stuttgart SB', stammnummer: '0771-2777', bereich: '000-499'},
  {standort: 'München', stammnummer: '0771-95456', bereich: '00-99'},
  {standort: 'Nürnberg GD', stammnummer: '079-23874', bereich: '000-999'},
  {standort: 'Nürnberg FD', stammnummer: '0911-836', bereich: '0000-9999'},
  {standort: 'Würzburg', stammnummer: '0911-9251', bereich: '000-499'},
  {standort: 'Berlin', stammnummer: '0951-3511', bereich: '000-999'}
];

表分页组件.html：

<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">

  <!-- Position Column -->
  <ng-container matColumnDef="standort">
    <th mat-header-cell *matHeaderCellDef> Standort </th>
    <td mat-cell *matCellDef="let element"> {{element.standort}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="stammnummer">
    <th mat-header-cell *matHeaderCellDef> Stammnummer </th>
    <td mat-cell *matCellDef="let element"> {{element.stammnummer}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="bereich">
    <th mat-header-cell *matHeaderCellDef> Bereich </th>
    <td mat-cell *matCellDef="let element"> {{element.bereich}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

标签： htmlangularangular-materialmat-table

解决方案

您可以像这样从css中指定每列的宽度。

/* mat-column-"COLUMN-NAME" */
mat-column-standort {
  width: 80%;
}

推荐阅读