表格可滚动时调整表格大小错误 - Angular Materials

Question

我正在使用表调整大小的这个示例，但我希望能够将列的大小调整为大于表的默认大小，并使用水平滚动。

我正在使用的示例：https://stackblitz.com/edit/mat-table-resize-column?file=src%2Fapp%2Fapp.component.ts

我尝试使用此代码：

this.renderer.setStyle(column, '最小宽度',

${width}px

);

而不是：

this.renderer.setStyle(column, "宽度",

${width}px

);

它可以工作，但是桌子功能很差；当我单击缩放器并只移动一点鼠标时，它会单独移动，如果我只使用 2 列，情况会更糟。

Answer 1

我解决了这个问题，添加：

this.renderer.setStyle(this.table, "width", `${this.tableWidth + distanceMouseMovement}px`);

在 onMouseMove 结束时，会在展开列并允许移动超过表格大小的同时更改表格大小

//This event activate when the user are clicking and move the mouse
  private onMouseMove = (event: MouseEvent) => {
    if (this.pressed && event.buttons) {
      //Determine how far the mouse has been moved
      const distanceMouseMovement = event.clientX - this.mousePosition;

      //Add style resizing to table to user can't select text
      this.renderer.setStyle(this.table, "-moz-user-select", "none");
      this.renderer.setStyle(this.table, "-ms-user-select", "none");
      this.renderer.setStyle(this.table, "user-select", "none");

      //Update the width of the column
      this.renderer.setStyle(this.column, "width", `${this.columnWidth + distanceMouseMovement}px`);
      this.renderer.setStyle(this.table, "width", `${this.tableWidth + distanceMouseMovement}px`);
    }
  };

  //This event activate when the user stop clicking
  private onMouseUp = (event: MouseEvent) => {
    if (this.pressed) {
      this.pressed = false;
      this.renderer.removeStyle(this.table, "-moz-user-select");
      this.renderer.removeStyle(this.table, "-ms-user-select");
      this.renderer.removeStyle(this.table, "user-select");
    }
  };

这是我的完整指令

import { Directive, OnInit, Renderer2, Input, ElementRef, HostListener } from "@angular/core";

@Directive({
  selector: "[resizeColumn]"
})
export class ResizeColumnDirective implements OnInit {
  @Input("resizeColumn") resizable: boolean;

  private column: HTMLElement;

  private table: HTMLElement;

  private pressed: boolean;

  private mousePosition: number;

  private columnWidth: number;

  private tableWidth: number;

  private screenSize: number;

  constructor(private renderer: Renderer2, private el: ElementRef) {
    this.column = this.el.nativeElement;
  }

  ngOnInit() {
    if (this.resizable) {
      const row = this.renderer.parentNode(this.column);
      const thead = this.renderer.parentNode(row);
      this.table = this.renderer.parentNode(thead);

      const resizer = this.renderer.createElement("span");
      this.renderer.setStyle(resizer, "cursor", "col-resize");
      this.renderer.setStyle(resizer, "width", "20px");
      this.renderer.setStyle(resizer, "height", "100%");
      this.renderer.setStyle(resizer, "position", "absolute");
      this.renderer.setStyle(resizer, "right", "-10px");
      this.renderer.setStyle(resizer, "top", "0");
      this.renderer.appendChild(this.column, resizer);
      this.renderer.listen(resizer, "mousedown", this.onMouseDown);
      this.renderer.listen(this.table, "mousemove", this.onMouseMove);
      this.renderer.listen("document", "mouseup", this.onMouseUp);

      this.screenSize = window.innerWidth;
    }
  }

  //----- HELPERS -----
  //This event activate when the user click
  private onMouseDown = (event: MouseEvent) => {
    // Get the current mouse position
    this.mousePosition = event.clientX;

    //Calculate the current with of column and table
    this.columnWidth = this.column.offsetWidth;
    this.tableWidth = this.table.offsetWidth;
    this.pressed = true;
  };

  //This event activate when the user are clicking and move the mouse
  private onMouseMove = (event: MouseEvent) => {
    if (this.pressed && event.buttons) {
      //Determine how far the mouse has been moved
      const distanceMouseMovement = event.clientX - this.mousePosition;

      //Add style resizing to table to user can't select text
      this.renderer.setStyle(this.table, "-moz-user-select", "none");
      this.renderer.setStyle(this.table, "-ms-user-select", "none");
      this.renderer.setStyle(this.table, "user-select", "none");

      //Update the width of the column
      this.renderer.setStyle(this.column, "width", `${this.columnWidth + distanceMouseMovement}px`);
      this.renderer.setStyle(this.table, "width", `${this.tableWidth + distanceMouseMovement}px`);
    }
  };

  //This event activate when the user stop clicking
  private onMouseUp = (event: MouseEvent) => {
    if (this.pressed) {
      this.pressed = false;
      this.renderer.removeStyle(this.table, "-moz-user-select");
      this.renderer.removeStyle(this.table, "-ms-user-select");
      this.renderer.removeStyle(this.table, "user-select");
    }
  };

  //This event activate when the user change the screen size
  @HostListener('window:resize', ['$event'])
  onResize() {
    //Change the table width to show the responsive table correctly
    this.renderer.setStyle(this.table, "width", "100%");
  }
}

希望对有同样问题的人有帮助