element ui 实现表格分页_el-table表格一分为二怎么输上下内容-CSDN博客

本文详细介绍了一款基于Vue框架的表格分页组件实现过程，包括数据展示、分页导航及响应式设计。通过具体代码示例，展示了如何使用ElTable和ElPagination组件来创建动态分页效果，同时介绍了数据绑定、事件监听等关键技术点。

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

图片效果
在这里插入图片描述
代码

<template>
 <div class="app">    
     <!-- 将获取到的数据进行计算 -->   
     <el-table :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%">
         <el-table-column prop="date" label="日期" width="180"></el-table-column>
         <el-table-column prop="name" label="姓名" width="180"></el-table-column>
         <el-table-column prop="address" label="地址"></el-table-column>
     </el-table>
    <el-pagination @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange" 
                    :current-page="currentPage" 
                    :page-sizes="pageSizes" 
                    :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" 
                    :total="totalCount">
        </el-pagination>
</div>
</template>
<script>
export default {
   data(){
       return {
           tableData:[],
           // 默认显示第几页
           currentPage:1,
           // 总条数
           totalCount:1,
           // 个数选择器
           pageSizes:[1,2,3,4],
           // 默认每页显示的条数
           PageSize:2,
       }
   },
 methods:{
       getTabData(){
           //此处直接赋值代替发Ajax获取数据
            this.tableData=[{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
            
            this.totalCount=this.tableData.length
            
         },
       // 分页
        // 每页显示的条数
       handleSizeChange(val) {
           // 改变每页显示的条数 
           this.PageSize=val
           // 在改变每页显示的条数时，要将页码显示到第一页
           this.currentPage=1
       },
         // 显示第几页
       handleCurrentChange(val) {
           // 改变默认的页数
           this.currentPage=val
       },
   },
   created:function(){
         this.getTabData() 
   }
}
</script>