elementUI+vue实现前端分页_vue实现前端前往第几页-CSDN博客

本文链接：https://blog.csdn.net/sywany0118/article/details/122488692

本文介绍了如何利用elementUI库结合Vue.js来实现前端分页。通过使用slice()方法，根据currentPage和pageSize动态截取数据，实现分页效果。同时，讨论了elementUI的分页组件特性，如：size-change和current-change事件，以及current-page、page-sizes、page-size等属性的使用，旨在帮助开发者理解并实现高效的数据分页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	  <el-table
	        :data="tabledata.slice((currentPage-1)*pagesize,currentPage*pagesize)"
	  </el-table>

slice() 方法以新的数组对象，返回数组中被选中的元素。

slice(start,end) 方法选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。

注释：slice() 方法不会改变原始数组。

从当前页(currentPage-1)*每页显示条数(pagesize),当前页(currentPage)*每页显示条数(pagesize)

       <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          v-show="tabledata.length > 0"
          :total="tabledata.length"
        >
        </el-pagination>

background:是否为分页按钮添加背景色
@ size-change方法，说明：pagesize(默认每页显示条数）改变时会触发，回调:当前页
@current-change方法，说明: currentPage(当前页)改变时会触发，回调:当前页
:current-page:当前页数
:page-sizes:每页显示个数选择器的选项设置
:page-size:每页显示条数
layout:组件布局，子组件名用逗号分隔
:total:总条数(数据总条数)

export default {
   data(){
       return {
            // 总数据
           tabledata:[],
           // 默认显示第几页
           currentPage:1,
           // 个数选择器（可修改）
           pagesizes:[1,2,3,4],
           // 默认每页显示的条数（可修改）
           Pagesize:1,
       }
   },
 methods:{
        // 每页显示的条数
       handleSizeChange(val) {
           // 改变每页显示的条数 
           this.Pagesize=val
           // 注意：在改变每页显示的条数时，要将页码显示到第一页
           this.currentPage=1
       },
         // 显示第几页
       handleCurrentChange(val) {
           // 改变默认的页数
           this.currentPage=val
       },
   },
}
</script>