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

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

引入分页

 

          <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>

 

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

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