表格分页

• 第一种情况：一次只展示一个页面的数据，下一页的数据需要发送数据向后台获取。

<el-table>
	表格
</el-table>
<el-pagination
        @size-change="handleSizeChange" //改变一页/X条数据的点击事件
        @current-change="handleCurrentChange" //第几页按钮
        :current-page.sync="curPage" //当前是第几页
        :page-sizes="[30,50,100,200]" //一页多少条数据的参数
        :page-size="pagesize" //当前一页几条数据
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" //总共多少条数据
      ></el-pagination>
//直接在表格下面，写分页的组件，在页面上就会自动在表格底部加上分页。

handleSizeChange(size) {
      this.pagesize = size;
      this.getReceivable(); //获取数据的方法
    },

        
handleCurrentChange(pageNum) {
      this.curPage = pageNum;
      this.getReceivable();
    }

• 第二种情况，一次性请求所有数据并分页，分页时毋需向后端请求数据

<el-table 
:data="areaGroup.slice((curPage-1)*pagesize,curPage*pagesize)"
>
//表格
</el-table>

<el-pagination
              :current-page.sync="curPage"
              :page-sizes="[40,50,100,200]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="areaGroup.length"
            ></el-pagination>

//areaGroup为表格数据