Vue之element-plus实现分页功能

一、展示效果

        第一页效果不需要进行计算，可以无限滑动

         

 第一页以后，最后一页之前

 

注意注意注意！ 页数组件最后给个固定定位或绝对定位否则当表格变小时 该组件也会变化位置

<el-pagination/>组件z

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

 声明变量：

        curretnPage：当前页

        total: 总页数 （这里我设置的每页显示9条数据，就用  总数据数+1/9 ，当然你想要每页显示10条或11条就改一下除数就可以）

 分页功能实现

//分页功能实习
const changePage = reactive({
  currentPage: 1,
  total: gdata.length + 1 / 9,
});



sdata为定义的tabel组件的数据
gdata为从后端接口返回的数据

//获取当前页数
const handelCurrentChange = (value) => {
  

//获取当前页码
  changePage.currentPage = value; 


//判断当前页是否为首页 页码从1开始，是则直接调用后端数据，否则要进行计算
  if (value > 1) {

    var i = (value - 1) * 10;  //计算当前页第一条数据的下标，

    var arry = [];  //建立一个临时数组

    //比如每页10条数据，第二页的第一条数据就是从 （2-1）*10 = 10 开始的 结束下标就是2*10=20 
    while (i < value * 10) {
     //解决最后一页出现null值
      if (gdata[i] != null) {
        arry.push(gdata[i]);
        i++;
        continue
      }
      break
    }
    sdata.value=arry

   } else {

    sdata.value = gdata;

  }
};