首先间接看成品成果
上面开始解说：
进入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就能够解决这个问题。