vue3分页组件pageSizes被清除?

如果您是在使用 Vue3 的官方分页组件，即 `el-pagination`，那么关于 `pageSizes` 被清除的问题，可能是因为在 Vue3 中 `el-pagination` 组件已经被废弃不再推荐使用了。取而代之的是 `el-pager` 组件。

对于 `el-pager` 组件，它的 `pageSizes` 属性仍然存在且可以正常使用。您可以在组件中将 `page-sizes` 属性设置为一个数组，例如：

<el-pager
  :page-sizes="[10, 20, 30, 40]"
  :page-size="pageSize"
  :total="total"
  @current-change="handleCurrentChange"
  @size-change="handleSizeChange"
></el-pager>

如果您使用的是其他分页组件，那么请提供更多细节或相关代码以便我更好地回答您的问题。

相关问题

vue3分页组件@update:current-page

下面是一个基于 Vue 3 的分页组件，其中包含 `updateCurrentPage` 函数来更新当前页码：

<template>
  <div class="pagination">
    <button @click="previousPage" :disabled="currentPage === 1">上一页</button>
    <span>{{ currentPage }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  props: {
    totalItems: {
      type: Number,
      required: true
    },
    itemsPerPage: {
      type: Number,
      default: 10
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    }
  },
  data() {
    return {
      currentPage: 1
    };
  },
  methods: {
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.updateCurrentPage();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.updateCurrentPage();
      }
    },
    updateCurrentPage() {
      // 在这里执行更新当前页码的操作
      console.log("当前页码是：" + this.currentPage);
    }
  }
};
</script>

该组件接收 `totalItems` 和 `itemsPerPage` 两个参数，分别表示总共的条目数和每页显示的条目数。在 `computed` 中计算出总页数 `totalPages`，在 `data` 中定义当前页码 `currentPage`，在 `methods` 中实现了上一页和下一页的点击事件，并在其中调用了 `updateCurrentPage` 函数来更新当前页码。

您可以在 `updateCurrentPage` 函数中添加其他操作来更新当前页码所对应的数据。在父组件中使用该分页组件时，需要传入 `totalItems` 和 `itemsPerPage` 两个参数，并监听 `updateCurrentPage` 事件来获取当前页码。例如：

<template>
  <div>
    <my-pagination :total-items="totalItems" :items-per-page="itemsPerPage" @update-current-page="onUpdateCurrentPage" />
    <!-- 在这里渲染当前页码所对应的数据 -->
  </div>
</template>

<script>
import MyPagination from "./MyPagination.vue";

export default {
  components: {
    MyPagination
  },
  data() {
    return {
      totalItems: 100,
      itemsPerPage: 10,
      currentPage: 1
    };
  },
  methods: {
    onUpdateCurrentPage(page) {
      this.currentPage = page;
      // 在这里更新当前页码所对应的数据
    }
  }
};
</script>

在这个例子中，父组件监听了 `updateCurrentPage` 事件，当事件触发时将当前页码 `currentPage` 更新为事件传递过来的页码 `page`，并在 `onUpdateCurrentPage` 函数中更新当前页码所对应的数据。

vue3分页组件的封装

在Vue3中封装分页组件的方法与Vue2有所不同。以下是一个基本的封装分页组件的方法：

1. 首先，在你的项目中创建一个名为`Pagination.vue`的组件文件。

2. 在`Pagination.vue`组件中，你可以使用`<template>`标签来定义组件的结构。可以使用`<div>`标签来包裹分页组件的内容，比如页码和按钮。

3. 在`<script>`标签中，你需要导入`vue`并声明组件。你可以使用`ref`来追踪当前页码，并且使用`computed`属性来计算总页数。

4. 在组件内部，你可以创建一个`methods`对象，并在其中定义一些方法来处理页码的变化。比如，你可以创建`goToPage`方法来跳转到指定的页码。

5. 最后，在`<style>`标签中，你可以定义组件的样式，如页码的颜色和按钮的样式。

在你的项目中使用这个封装的分页组件的方法如下：

1. 在需要使用分页功能的组件中，使用`import`关键字导入刚刚封装的`Pagination`组件。

2. 在`components`属性中注册`Pagination`组件。

3. 在`<template>`标签中使用自定义的分页组件。可以使用`v-model`指令来双向绑定当前页码。

通过上述步骤，你就可以在Vue3中封装一个分页组件并在项目中使用了。这个组件可以提供分页功能，让用户可以方便地切换页码。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [基于Vue如何封装分页组件](https://download.csdn.net/download/weixin_38550605/12789728)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Vue3 element-ui实现Pagination分页组件--封装分页](https://blog.csdn.net/coinisi_li/article/details/128952886)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]