实战场景
在实际开发中，项目会遇到使用分页的情况，分页可以使从后端获取的数据进行部分性展示，从而大大提高了获取数据的效率、同时给使用者带来视觉上的舒适。
引入分页
<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>
随后，只需调用后端的接口即可获得数据并且进行渲染
