前端自定义分页

佚名 / 2023-05-06 / 原文

<el-table
        size="mini"
        stripe
        border
        fit
        height="406px"
        highlight-current-row
        :header-cell-style="{background:'#F0F3F8'}"
        :data="historyResearchUploadList.slice((paramsUpload.page-1)*paramsUpload.size,paramsUpload.page*paramsUpload.size)"
      >
        <el-table-column align="center" type="index" label="序号" width="55" />
        <el-table-column align="center" property="date" label="资料名称">
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="exportUpload(scope.row)"
            >{{ scope.row.fileName }}</el-link>
          </template>
        </el-table-column>
        <el-table-column align="center" property="name" label="备注" />
      </el-table>
      <el-pagination
        :page-sizes="[10, 30, 50]"
        :current-page.sync="paramsUpload.page"
        :page-size="paramsUpload.size"
        :total="total"
        style="margin-top: 20px"
        background
        layout="total,sizes,prev,pager,next,jumper"
        @size-change="pageSizeChange"
        @current-change="pageChange"
      />


 paramsUpload: {
        page: 1,
        size: 10
      },
      total: 0,
historyResearchUploadList: []

pageChange(pageIndex) {
      this.paramsUpload.page = pageIndex
    },
    pageSizeChange(pageSize) {
      this.paramsUpload.page = 1
      this.paramsUpload.size = pageSize
    },