ElementUI Pagination 分页器绑定数据

1.el-table绑定数据          

    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    height="auto"
                    border
                    stripe
                    style="width: 100%"
                    >

2.  添加 el-pagination分页       

       <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[1, 3, 5, 8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalNum">
            </el-pagination>
          </div>

3. data中添加相应参数

        data(){
            return {
                tableData: [],  //数据
                currentPage: 1,//默认显示第一页
                pageSize:1,//默认每页显示10条
                totalNum: 1000 //总页数
            }
        }

4. 添加跳页面和修改每页个数的动态函数

               handleSizeChange(val) {
                   console.log(`每页 ${val} 条`);
                   this.pageSize = val;    //动态改变
                },
                handleCurrentChange(val) {
                   console.log(`当前页: ${val}`);
                   this.currentPage = val;    //动态改变
                }

5. 在页面加载时添加总数量

        created(){
            this.totalNum=this.tableData.length;
        }

收工~