首先直接看成品效果
QQ录屏20220524155524_.gif

下面开始讲解:
进入ngzorro组件库官方网页 https://ng.ant.design
点击实验性功能,找到调整尺寸
image.png

image.png
滚动到列表对应的地方,复制其相关的代码

注意要在对应的模块和样式文件中引入对应的模块和样式,不然就会出问题
image.pngimage.png

复制完后什么都不动的话,页面是这样的
QQ录屏20220524155524_ (1).gif

可以看到表格上有两个竖线,很不美观,我们先去掉其中一个竖线
image.png
修改对应的样式
image.png
image.png
可以看到页面表现正常了一点。

然后想要拖动的时候改变大小,而不是拖动结束以后改变大小,单纯的修改触发方式发现并不行
image.png
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`
      }
    })
  }

这时候表格可以拖拽了
QQ录屏20220524155524_ (2).gif

如果不想要点击以后出现那一条竖线,把html中的nzPreview删掉就行

现在来实现文字溢出显示省略号功能
QQ录屏20220524155524_ (3).gif

可以看到,只要设置包裹文字的容器的宽度随着顶部的宽度随动就行

核心代码如下

//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就可以解决这个问题。


munergs
30 声望6 粉丝

现在即是最好。