---

前言

提示：在数据处理和展示时，我们常常对需要数据进行分页展示，故本文主要介绍基于vue3和element-plus实现的分页功能

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、案例代码展示及效果

主要代码：

<template>
<div class="body">
  <div class="content">
    <!-- 数据展示 -->
    <li v-for="(item,index) in item.slice(
              (currentPage - 1) * PageSize,
              currentPage * PageSize
            )">{{item}}</li>
    <!-- 分页组件 -->
    <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
           v-model:currentPage="currentPage"
          :page-sizes="[10, 15, 20]"
          :page-size="PageSize"
           layout="total,sizes, prev, pager, next"
          :total="totalCount"
          class="paging"
        >
    </el-pagination>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      item:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
      // 默认显示第一页
      currentPage: 1,
      // 总的数据条数
      totalCount: 15,
      // 默认每页显示的条数（可修改）
      PageSize: 15,
    }
  },
  
  methods: {
    // 修改每页显示的条数
    handleSizeChange(side) {
      // 改变每页显示的条数
      this.PageSize = side;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(pageNumber) {
      // 改变默认的页数
      this.currentPage = pageNumber;
    },
  },

  created() {
    // 获取数据总数
    this.totalCount = this.item.length
  },
}
</script>

<style scoped>
  .body {
    position: relative;
    width: 700px;
    height: 500px;
    border: 1px solid #999;
    padding: 10px 50px 0;
    margin: 0 auto;
  }

  .content li {
    height: 30px;
    line-height: 30px;
    margin: auto;
  }

 .content li:nth-child(2n+1) {
   background-color: #999;
 }

  .paging {
    position: absolute;
    bottom: 10px;
    left: 30%;
  }
</style>

效果：

二、分页功能模块解释

1.引入分页组件

	<el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
           v-model:currentPage="currentPage"
          :page-sizes="[10, 15, 20]"
          :page-size="PageSize"
           layout="total,sizes, prev, pager, next"
          :total="totalCount"
          class="paging"
        >
    </el-pagination>

其中的“handleSizeChange”方法用来改变页面显示数据的条数；“handleCurrentChange”方法用来改变显示页面为第几页。
如下：

// 修改每页显示的条数
    handleSizeChange(side) {
      // 改变每页显示的条数
      this.PageSize = side;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(pageNumber) {
      // 改变默认的页数
      this.currentPage = pageNumber;
    },

2.结合slice()和PageSize 、currentPage 参数对遍历数据实现分页

代码如下：

<li v-for="(item,index) in item.slice(
              (currentPage - 1) * PageSize,
              currentPage * PageSize
            )">{{item}}</li>

其中slice()的详细用法可见于W3school

---

提示：文章到此已结束，本文仅为个人看法，若有不足欢迎各位指出。