关于angular:angular中使用ngzorro组件库实现表格拖拽控制每列大小功能

首先间接看成品成果

上面开始解说：
进入 ngzorro 组件库官网网页 https://ng.ant.design
点击试验性功能，找到调整尺寸

滚动到列表对应的中央，复制其相干的代码

留神要在对应的模块和款式文件中引入对应的模块和款式，不然就会出问题

复制完后什么都不动的话，页面是这样的

能够看到表格上有两个竖线，很不美观，咱们先去掉其中一个竖线

批改对应的款式


能够看到页面体现失常了一点。

而后想要拖动的时候扭转大小，而不是拖动完结当前扭转大小，单纯的批改触发形式发现并不行

nzResizeEnd 改为 nzResize 并不能实现成果，而且拖动完结当前也不能扭转。
批改代码

 onResize({width}: NzResizeEvent, col: string): void {// this.cols = this.cols.map(e => (e.title === col ? { ...e, width: `${width}px` } : e));
    this.cols.map(e=>{if(e.title===col){e.width=`${width}px`
      }
    })
  }

这时候表格能够拖拽了

如果不想要点击当前呈现那一条竖线，把 html 中的 nzPreview 删掉就行

当初来实现文字溢出显示省略号性能

能够看到，只有设置包裹文字的容器的宽度随着顶部的宽度随动就行

外围代码如下

//html
  <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>{{data.name}}</td>
      <td>{{data.age}}</td>
      <td >
        <div style="
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        "[ngStyle]="{'width':data.width}">
          {{data.address}}
        </div>
      </td>
      <td>-</td>
    </tr>
  </tbody>
//ts
  listOfData:any = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park'
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park'
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park'
    }
  ];
  onResize({width}: NzResizeEvent, col: string): void {// this.cols = this.cols.map(e => (e.title === col ? { ...e, width: `${width}px` } : e));
    this.cols.map(e=>{if(e.title===col){e.width=`${width}px`;
        this.listOfData.map((item:any)=>{item.width = `${width}px`;
        })
      }
    })
  }

这样一个简略的可调整宽度的列表就实现啦。

留神，表格中应用 resizable 组件的时候，容易呈现各种小 BUG，比方，笔者就曾遇到过应用了调整尺寸当前，ngzorro 的 table 列表组件的左固定 nzLeft 属性生效的 bug，然而解决起来也并不简单，nzLeft 次要要是依附 position:sticky 属性实现，该 bug 会把 position 的属性改为 relative 所以只有强制把要左固定的列的 position 属性定为 sticky 就能够解决这个问题。