美文网首页
element ui表格 前端分页

element ui表格 前端分页

作者: 吃肉肉不吃肉肉 | 来源:发表于2021-11-04 09:57 被阅读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
    },

相关文章

网友评论

      本文标题:element ui表格 前端分页

      本文链接:https://www.haomeiwen.com/subject/dfghzltx.html