element表格分页功能

element表格分页

效果图

1.添加表格和分页组件

<el-table 
stripe :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
border height="328">
     <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-column prop="code" 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>

2.添加数据绑定，这里自己手动造了很多数据

3.添加方法

 methods: {
        handleSizeChange: function(val) {
            this.pagesize = val;
        },
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage;
        },
    }