element ui表格 前端分页

2021-11-04  本文已影响0人  吃肉肉不吃肉肉
<el-table
          :data="numData.slice((numPage.currentPage-1)*numPage.pageSize,numPage.currentPage*numPage.pageSize)"
          border
          stripe
        >
          <el-table-column prop="index" label="序号" width="50" align="center" />
          <el-table-column prop="nickname" label="代理公司团队" align="center" />
          <el-table-column prop="A" label="A礼包" width="180" align="center" />
          <el-table-column prop="B" label="B礼包" align="center" />
          <el-table-column prop="num" label="总计" align="center" />
        </el-table>
        <div style="margin-top: 20px">
          <el-pagination
            :current-page="numPage.currentPage"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="numPage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="parseInt(numPage.total)"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>

 data() {
    return {
      loadingFull: false,
      numData: [],
      numPage: {
        currentPage: 1,
        pageSize: 15,
        total: 0
      },
      activity_id: '',
      activitys: [],
    }
  },
handleSizeChange(newSize) {
      // pagesize改变触发
      this.numPage.pageSize = newSize
    },
    handleCurrentChange(newPage) {
      // 页码改变触发
      this.numPage.currentPage = newPage
    },
上一篇下一篇

猜你喜欢

热点阅读