<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50]" :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

这段代码是用来实现分页功能的，使用了Element UI框架中的el-pagination组件。其中，v-model绑定了当前页码和每页显示的数据条数，page-sizes定义了可选的每页数据条数，layout定义了分页组件的布局方式，total指定了总数据条数，@size-change和@current-change则分别是当每页显示的数据条数或者当前页码改变时触发的事件。

相关问题

Element Plus 版本<el-pagination>分页中自定义插槽，如何使用，请举例，并提供完整代码

在 Element Plus 的版本中，`<el-pagination>` 分页组件支持使用插槽（slot）来自定义页面的部分样式和内容。下面是一个基本的例子，展示了如何在每个部分插入自定义内容：

<template>
  <div>
    <!-- 使用默认布局 -->
    <el-pagination
      :page-sizes="[2, 3, 4, 5]"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="totalCount"
      layout="prev, pager, next, jumper"
      @current-change="onCurrentChange"
      @size-change="onPageSizeChange">
      
      <!-- 自定义总条数 slot -->
      <template slot="total">
        共 {{ totalCount }} 条记录
      </template>

      <!-- 自定义上一页 slot -->
      <template slot="prev">
        <button slot="prev">上一页</button>
      </template>

      <!-- 自定义下一页 slot -->
      <template slot="next">
        <button slot="next">下一页</button>
      </template>

      <!-- 自定义跳转输入框 slot -->
      <template slot="jumper">
        跳转到第 <input v-model.number="jumpTo" @keyup.enter="onJump" />
      </template>

      <!-- 自定义页码区域 slot -->
      <template slot="pager">
        <span>第 {{ currentPage + 1 }} / {{ totalPages }}</span>
      </template>
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      totalCount: 100, // 示例数据
      jumpTo: null,
      totalPages: Math.ceil(totalCount / pageSize),
    };
  },
  methods: {
    onCurrentChange(current) {
      console.log(`当前页：${current}`);
    },
    onPageSizeChange(size) {
      this.pageSize = size;
      console.log(`每页大小：${size}`);
    },
    onJump() {
      if (this.jumpTo && Number.isInteger(this.jumpTo)) {
        this.$emit('current-change', this.jumpTo);
      }
    },
  },
};
</script>

在这个例子中，我们覆盖了“总条数”、“上一页/下一页按钮”以及“跳转输入框”等部分，并通过 `v-model` 和事件监听器控制输入的行为。当你需要更改显示内容或添加功能时，只需替换或扩展这些插槽即可。

element .el-pagination兼容移动端

`element .el-pagination` 默认样式在移动端会有一些显示问题，可以通过以下方式解决：

1. 使用 `element-ui` 提供的响应式工具类实现移动端样式适配。例如，可以在 `.el-pagination__sizes` 和 `.el-pagination__pager` 元素上添加 `el-hidden--xs-only` 类，使其只在移动端隐藏。

<el-pagination
  class="pagination"
  :page-size="pageSize"
  :total="total"
  :current-page="currentPage"
  layout="total, sizes, prev, pager, next, jumper"
>
  <span slot="sizes" class="el-pagination__sizes el-hidden--xs-only">
    每页显示：
    <el-select v-model="pageSize" @change="handleSizeChange">
      <el-option v-for="item in pageSizeOptions" :key="item" :label="item" :value="item"></el-option>
    </el-select>
  </span>
  <span slot="pager" class="el-pagination__pager el-hidden--xs-only">
    <el-button type="text" icon="arrow-left" @click="prevPage" :disabled="currentPage === 1"></el-button>
    <el-button type="text" icon="arrow-right" @click="nextPage" :disabled="currentPage === pageCount"></el-button>
  </span>
</el-pagination>

2. 自定义样式，对 `.el-pagination` 进行针对性的样式调整。例如，可以对 `.el-pagination__sizes` 和 `.el-pagination__pager` 元素设置 `display: none`，然后在移动端使用 media query 显示这些元素。

<el-pagination
  class="pagination"
  :page-size="pageSize"
  :total="total"
  :current-page="currentPage"
  layout="total, sizes, prev, pager, next, jumper"
>
  <span slot="sizes" class="el-pagination__sizes">
    每页显示：
    <el-select v-model="pageSize" @change="handleSizeChange">
      <el-option v-for="item in pageSizeOptions" :key="item" :label="item" :value="item"></el-option>
    </el-select>
  </span>
  <span slot="pager" class="el-pagination__pager">
    <el-button type="text" icon="arrow-left" @click="prevPage" :disabled="currentPage === 1"></el-button>
    <el-button type="text" icon="arrow-right" @click="nextPage" :disabled="currentPage === pageCount"></el-button>
  </span>
</el-pagination>

/* 移动端样式 */
@media (max-width: 768px) {
  .el-pagination__sizes,
  .el-pagination__pager {
    display: block;
  }
}

/* 非移动端样式 */
@media (min-width: 769px) {
  .el-pagination__sizes,
  .el-pagination__pager {
    display: none;
  }
}