ant-design-vue每页条数出现选择框_antdesign 数字选择框-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_52558225/article/details/122703449

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码复现：

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>