欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

修改(angular)antd组件库的table对齐及宽度等

程序员文章站 2022-04-29 08:53:58
...

在angular项目里使用antd组件库的table组件
1、改变对齐方式

::ng-deep th, td {
            text-align: center;
        }

2、修改宽度
修改(angular)antd组件库的table对齐及宽度等
代码:

			  <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、没有数据时,显示暂无数据
修改(angular)antd组件库的table对齐及宽度等
代码:

<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>

修改(angular)antd组件库的table对齐及宽度等

相关标签: table