修改(angular)antd组件库的table对齐及宽度等
程序员文章站
2022-04-29 08:53:58
...
在angular项目里使用antd组件库的table组件
1、改变对齐方式
::ng-deep th, td {
text-align: center;
}
2、修改宽度
代码:
<th [nzWidth]="'10%'">年份</th>
<th [nzWidth]="'10%'">ccc</th>
<th [nzWidth]="'400px'">bbb</th>
<th [nzWidth]="'400px'">aa</th>
<th [nzWidth]="'400px'">附件</th>
<th [nzWidth]="'200px'">操作</th>
3、没有数据时,显示暂无数据
代码:
<nz-table #basicTable [nzData]="listOfData" [nzBordered]='true' [nzNoResult]="'暂无数据'">
……
<nz-table>
// 或者
<nz-table #basicTable [nzData]="listOfData" [nzBordered]='true' [nzNoResult]="'Template'">
……
<nz-table>
<ng-template #Template>花里胡哨的暂无数据</ng-template>
listOfData = [
{
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'
}
];
4、不显示分页
<nz-table #basicTable [nzData]="listOfData" [nzBordered]='true' [nzNoResult]="'暂无数据'" [nzShowPagination]='false'>
……
<nz-table>
上一篇: Hbase数据库基本操作
下一篇: SparkCore知识汇总