修复角度材质表中的列宽

Answer 1

在尝试了很多事情之后，以下解决方案对我有用：

  .mat-column-email{
       max-width: 60px !important;
       min-width: 60px !important;
    }

因此，不要设置宽度，而是设置该列的最大宽度和最小宽度。

Answer 2

  private startX: number = 0;
  private startWidth: number = 0;
  private isResizing: boolean = false;
  private currentColumn: HTMLElement | null = null;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mousedown', ['$event'])
  onMouseDown(event: MouseEvent): void {
    this.currentColumn = this.el.nativeElement;
    this.startX = event.clientX;
    this.startWidth = this.currentColumn!.offsetWidth;
    this.isResizing = true;
    this.currentColumn!.classList.add('resizing');
  }

  @HostListener('document:mousemove', ['$event'])
  onMouseMove(event: MouseEvent): void {
    if (this.isResizing && this.currentColumn) {
      const newWidth = this.startWidth + (event.clientX - this.startX);
      this.renderer.setStyle(this.currentColumn, 'width', `${newWidth}px`);
    }
  }

  @HostListener('document:mouseup')
  onMouseUp(): void {
    if (this.isResizing) {
      this.isResizing = false;
      if (this.currentColumn) {
        this.currentColumn.classList.remove('resizing');
        this.currentColumn = null;
      }
    }
  }