时间戳

首页 > 解决方案 > 如何使用 antd for angular 将表格中的分页位置更改为居中？

angular - 如何使用 antd for angular 将表格中的分页位置更改为居中？

问题描述

我在 Antd vs.12.0.2 上，我尝试使用 Angular 和 Antd for Angular 实现数据表。

这是我的 nz-table 代码内容。

  <nz-table
    #membersTable
    nz-show-pagination
    nzSize="default"
    nzTableLayout="fixed"
    nzPaginationType="default"
    nzPaginationPosition="bottom"
    [nzData]="members"
  >
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone number</th>
        <th>Accounts</th>
        <th nzWidth="70px"></th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let member of membersTable.data">
        <tr class="org-admin-member-row" [member]="member"></tr>
      </ng-container>
    </tbody>
  </nz-table>

没有属性可以将分页移到表格的中心。所以，我试图覆盖样式，但没有任何改变。

这是我在较少文件中尝试的内容。

nz-table {
  nz-pagination {
    justify-content: center;
  }
}

不能覆盖antd类样式吗？

标签： angularantd

解决方案

哦，我找到了解决这个问题的答案。为了帮助其他与我遇到同样问题的人，我将向公众发布这个答案。

Angular 为其样式添加前缀，这些样式通过其组件 ID 用于组件，如下所示。

.header[_ngcontent-jjj-c93]   .user-dropdown[_ngcontent-jjj-c93] {
  cursor: pointer;
}
.content[_ngcontent-jjj-c93] {
  background-color: white;
}
.bottom-menu[_ngcontent-jjj-c93] {
  position: absolute;
  bottom: 0;
}

因此，当我尝试覆盖样式时，它们的前缀是这样的。

nz-table[_ngcontent-jjj-c198] nz-pagination[_ngcontent-jjj-c198] {
  justify-content: center;
}

这就是为什么覆盖样式不能改变分页位置的原因，所以我在 custom.less 文件中创建了覆盖样式，该文件位于 src/app/styles 文件夹中，用于在应用程序中定义自定义全局样式。

代码如下所示。

org-admin-members {
  .ant-table-pagination {
    justify-content: center !important;
  }
}

它成功地改变了分页位置。

注意：您必须确保在 src/app/styles.less 文件中包含 custom.less 文件，并且应该将 '!important' 规则添加到 css 样式中。

推荐阅读