Angular 4材料表可调整大小的列

Question

是否可以使用可调整大小的列制作Angular 4 material table？类似于This example。

Answer 1

这在Angular 4中完美无缺。

start: any = undefined;
pressed: boolean = false;
startX: any;
startWidth: any;
resizableFnMousemove: () => void;
resizableFnMouseup: () => void;

resizeTable(event: any, column: any) {
  this.start = event.target;
  this.pressed = true;
  this.startX = event.pageX;
  this.startWidth = this.start.clientWidth;
  this.mouseMove(column);
}

mouseMove(column: any) {
  this.resizableFnMousemove = this.renderer.listen('document', 'mousemove', (event) => {
    if (this.pressed) {
      let width = this.startWidth + (event.pageX - this.startX);
      let index = this.start.cellIndex;
      column.width = width;
    }
  });
  this.resizableFnMouseup = this.renderer.listen('document', 'mouseup', (event) => {
    if (this.pressed) {
      this.pressed = false;
      this.resizableFnMousemove();
      this.resizableFnMouseup();
    }
  });
};

您可以像这样

在表格标题上指定鼠标移动事件

<th [ngStyle]="{'width': column.width > 0 ? column.width + 'px':'100px'}" (mousedown)="resizeTable($event, column)" >
     {{ column.title }}
</th>

Answer 2

我使用了马特·刘易斯（Matt Lewis）的resizable-element库，它很好用，很简单。