vue3+elementuiplus实现分页功能

实战场景

在实际开发中，项目会遇到使用分页的情况，分页可以使从后端获取的数据进行部分性展示，从而大大提高了获取数据的效率、同时给使用者带来视觉上的舒适。

引入分页

          <el-pagination
              layout="prev, pager, next"
              :total="changePage.total"
              class="pageNext"
              @current-change="handleCurrentChange"
              v-model:currentPage="changePage.currentPage"
              background>
          </el-pagination>

注意:这里默认一页显示10条数据,如果想要修改每页显示个数，则加上:page-size属性即可，比如你想每页显示100条，则:page-size="100"

实现逻辑

<script setup>
import {
    
    reactive} from 'vue'
const changePage = reactive({
    
    
  currentPage:1, //默认当前页面为1
  total: Number(''), //总共有多少数据
})
//这里是获取当前页数
const handleCurrentChange = (val)=> {
    
    
  changePage.currentPage = val
}
<script>

随后，只需调用后端的接口即可获得数据并且进行渲染

小结

实现分页非常简单，主要是获取当前页的页数，从而将页数与后端的接口相对应，从而获取数据，数据总量也需要从后端的接口中获得！