element表格分页

element表格分页,前端完成分页功能

2022-08-31  本文已影响0人  Henry01

当后端没有分页的时候,一次返回了全部数据, 用 element 中的组件分页并不能对数据进行切割 ,需要请求回数据后,
Vue 使用 Element 组件实现前端自己的分页功能

<el-table 
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
border >
     <el-table-column type="index"></el-table-column>
     <el-table-column prop="type" label="类型"></el-table-column>
     <el-table-column prop="name" label="姓名"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40, 50]"
:page-size="pagesize"
:total="tableData.length"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
pagesize:20,    //默认分页每页数据量
currentPage:1, //默认展示第一页数据
methods: {
        handleSizeChange: function(val) {
            this.pagesize = val;
        },
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage;
        },
    }

注意:每次请求新数据的时候记得把当前页初始:this.currentPage = 1

上一篇下一篇

猜你喜欢

热点阅读