短视频平台开发，vue3+elementuiplus实现分页功能

短视频平台开发，vue3+elementuiplus实现分页功能

引入分页

 

1

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

​

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

 

实现逻辑

 

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

 

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

以上就是短视频平台开发，vue3+elementuiplus实现分页功能， 更多内容欢迎关注之后的文章