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

【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 {{ data.name }} {{ data.age }} {{ data.address }} - //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就可以解决这个问题。