el-pagination 动态切换每页条数、页数切换

目录

​​业务场景​​

​​官方链接​​

​​实现效果​​

​​使用框架​​

​​代码展示​​

​​template代码​​

​​script代码​​

​​变量定义​​

​​事件定义​​

​​handleSizeChange事件--实现每页条数改变表格动态变化​​

​​handleCurrentChange事件--切换页码​​

​​css代码​​

​​完整代码​​

​​总结​​

业务场景

当表格中的数据量如果非常庞大的时候我们不可能让数据整个全部一下展示出来，导致用户需要无限的往下滚动鼠标，给用户造成不清楚到底有多少数据的一个现象，让用户产生看不到头的焦躁心理。这时候我们可以借助分页器去实现数据的分页效果，根据页数和每页条数去实现真分页。

这个在项目中是经常使用到的一种场景，今天我来分享分享我们具体的实现和需要注意的一些点

官方链接

Pagination 分页：​​Pagination 分页 | Element Plus​​

实现效果

这篇博客要实现的是课程和班级的一个绑定关系，当页面加载之后给课程和班级下拉框一个默认值，通过切换课程班级下拉框中的选项之后班级下拉框中的选项也随之变换成，当前选中课程下的所有班级名

使用框架

Vue3+element-plus(1.2.0-beta.5)

代码展示

说明：在本篇博客中我重点分享分页器的时候，关于el-table表格可以参考这篇博客：​​el-table 列的动态显示与隐藏

template代码

<!-- 分页器 -->
<div class="demo-pagination-block">
    <span class="demo-pagination-block allTotal">共{{ total }}条</span>
    <el-config-provider :locale="locale">
      <el-pagination
        :total="total"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[30, 50, 100]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-config-provider>
</div>

script代码

变量定义

var total = ref(0); //总条数

// 当前页数
const currentPage = ref(1);

//每页显示条目个数
const pageSize = ref(30);

//是否使用小型分页样式
const small = ref(false);

//是否为分页按钮添加背景色
const background = ref(false);

//是否禁用分页
const disabled = ref(false);

事件定义

handleSizeChange事件--实现每页条数改变表格动态变化

//每页显示条数改变
const handleSizeChange = (val) => {
      searchContent.value = "";
      pageSize.value = val;
      currentPage.value = currentPage.value;    
};

handleCurrentChange事件--切换页码

//当前页变动
    const handleCurrentChange = (val) => {
      pageSize.value = pageSize.value;
      currentPage.value = val;
      studentData(classID.value, courseID.value, currentPage.value, pageSize.value);
    };

css代码

.demo-pagination-block {
  display: inline-block;
  position: relative;
}

.allTotal {
  position: absolute;
  left: -4em;
  top: 7px;
  color: #606266;
  font-size: 14px;
}

完整代码

<template>
    <!-- 分页器 -->
    <div class="demo-pagination-block">
        <span class="demo-pagination-block allTotal">共{{ total }}条</span>
        <el-config-provider :locale="locale">
          <el-pagination
            :total="total"
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[30, 50, 100]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-config-provider>
    </div>
</template>

<script>
import { reactive, ref, onMounted } from "vue";

export default {
  components: {
  },
  setup() {
  //总条数
    var total = ref(0); 

    // 当前页数
    const currentPage = ref(1);
    
    //每页显示条目个数
    const pageSize = ref(30);
    
    //是否使用小型分页样式
    const small = ref(false);
    
    //是否为分页按钮添加背景色
    const background = ref(false);
    
    //是否禁用分页
    const disabled = ref(false);
      
  //每页显示条数改变
  const handleSizeChange = (val) => {
          searchContent.value = "";
          pageSize.value = val;
          currentPage.value = currentPage.value;    
  };


  //当前页变动
    const handleCurrentChange = (val) => {
          pageSize.value = pageSize.value;
          currentPage.value = val;
          studentData(classID.value, courseID.value, currentPage.value, pageSize.value);
    };


    return {
      total,
        currentPage,
        pageSize,
        small,
        background,
      disabled,
        handleSizeChange,
        handleCurrentChange,
    };
  },
};
</script>

<style>
    .demo-pagination-block {
      display: inline-block;
      position: relative;
    }
    
    .allTotal {
      position: absolute;
      left: -4em;
      top: 7px;
      color: #606266;
      font-size: 14px;
}

</style>

关于当前页面的实现可以参考如下博客：

el-table：​​el-table 列的动态显示与隐藏_吃豆子的恐龙的博客

总结

多看官方文档，我们遇到的很多问题其实文档中都有详细说明。

如果有想要交流的内容欢迎在评论区进行留言，如果这篇文档受到了您的喜欢那就留下你点赞、收藏脚印支持一下博主~