16.el-table前端分页

HTML部分

        <div class="buyerSummerarizeTable">
          <el-table
            :data="
              summarizeTableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            stripe
            border
            height="100%"
            style="width: 100%"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              label="需求侧资源"
              prop="name"
              min-width="200"
              fixed
            ></el-table-column>
           </el-table>
        </div>
        <div class="footer">
          <el-pagination
            align="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="summarizeTableData.length"
            :pager-count="7"
          >
          </el-pagination>
        </div>

JS部分

    // 切换size
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    // 切换页数
    handleCurrentChange(val) {
      this.currentPage = val;
    },