前端：el-pagination分页

合集 - OEP项目(8)

1.项目依赖2024-02-042.SpringSecurity2024-02-093.注册和登录的实现2024-02-144.回调函数是把函数当参数供函数体调用的函数2024-02-235.后端：mybatisPlus分页查询2024-03-01

6.前端：el-pagination分页2024-03-03

7.后端：数据流、数据聚合2024-03-068.正则表达式2024-03-13

收起

代码：

<el-pagination 
    @current-change="changePage" 
    :page-size="6"  <!--每页数量-->
    :pager-count="7"  <!--能显示的页码，注意是pager不是page-->
    background
    layout="prev, pager, next" 
    :total="dataCount"   <!--注意dataCount从后端接收后的数据格式，看看是否有必要用parseInt把字符串转数字-->
/>

切换页面触发的事件：@current-change="changePage"

注意：total是总数据量，不是总页数！！！

绑定的函数中要做的事情：向后端请求新的页面和总页面，注意，该函数在html上不需要传递参数，在写函数体的时候需要写形参：

function changePage(pageNum:number){
    testPaperStore.getTestPaper(pageNum,(dataCount, sumPageCount)=>{  //  向后端获取数据放在changePage里面，并在页面挂载时调用它
        pageData.value.DataCount = dataCount, pageData.value.sumPageCount = sumPageCount;
        pageData.value.currentPage = pageNum;
        formDate();
    });
}