vue的Element-ui的分页

vue的Element-ui的分页

1.填写el-table标签的data属性

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

</el-table>

2.填写el-pagination标签

<el-pagination class="fy"
               layout="prev, pager, next"
               @current-change="current_change"
               :total="total"
               :page-size.sync="pagesize"
               background
               >
</el-pagination>

3.在js的data里定义分页相关的参数

export default {
	data() {
        total:1,//默认数据总数
        pagesize:2,//每页的数据条数
        currentPage:1,//默认开始页数
        tableData: [],
}
}

4.填写相对应分页方法

create:function(){
    
    
    this.total = this.tableData.length;
},
methods:{
    
    
    current_change(currentPage){
    
    
        this.currentPage = currentPage;
    },
}