首先直接看成品效果
下面开始讲解:
进入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
就可以解决这个问题。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。