ant-design-vue每页条数出现选择框

吾之涝，汝不及也。

已于 2024-01-04 14:26:53 修改

阅读量413

点赞数 9

文章标签： html5 anti-design-vue

于 2024-01-04 14:26:03 首次发布

本文链接：https://blog.csdn.net/m0_52558225/article/details/122703449

版权

本文详细描述了一个使用自定义a-pagination组件的HTML代码示例，重点讨论了如何在表格中实现pageSize的选择，并且指出了许多教程中未提及的关键设置。

摘要由CSDN通过智能技术生成

代码复现：

1. 由于是非js的原因，所以就仅仅展示html相关的代码了。

由于我用的是自定义的<a-pagination><a-pagination>，并且

showSizeChanger:true 是否可以改变 pageSize，

这个很重要一定要加上，很多网上的教程里都没写。

参考博客链接

<a-table
      :columns="columns"
      :data-source="tableData.list"
      :pagination="false"
  >
    <!--头部单元格-->
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined/>
          {{ column.name }}
        </span>
      </template>
    </template>

    <!--身体单元格-->
    <template #bodyCell="{ column, record }">

      <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>

      <template v-else-if="column.key === 'type'">
        <span>
          <a-tag
              :key="record.type"
              :color="record.type === '1' ? 'volcano' : record.type=== '2' ? 'geekblue' : 'green'"
          >
            {{ PassengerTypeEnum.getDescription(record.type) }}
          </a-tag>
        </span>
      </template>

      <template v-else-if="column.key === 'action'">
        <span>
         <!-- <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical"/>-->
          <a>删除</a>
          <a-divider type="vertical"/>
          <a class="ant-dropdown-link">
            更多操作
            <down-outlined/>
          </a>
        </span>
      </template>

    </template>

    <!-- 尾部分页组件 -->
    <template #footer>
      <div class="custom-pagination" style=" display: flex;justify-content: center;">
        <a-pagination
            :total="pagination.total"
            v-model:current="pagination.current"
            v-model:page-size="pagination.pageSize"
            :page-size-options="['2', '10', '20', '30']"
            :show-total="total => `总共 ${pagination.total} 条`"
            show-size-changer="true"
            @change="handlePageChange"/>
      </div>
    </template>

  </a-table>