vue+elementUI组件table实现前端分页功能_el-table 显示上一页下一页

 前端分页和后端分页就是请求的差异，前端分页的话只请求一次，所以要在render table组件的时候控制下数据

:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)

然后total等于table数据的长度

:total="tableData.length"

具体代码如下：

<el-dialog title="报修设备列表" :visible.sync="dialogRepairDevicesTable" width="60%">
      <el-table
        :data="repairOrder.repairDevices.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      >
        <el-table-column property="deviceNumber" label="编号" />
        <el-table-column property="deviceName" label="名称" />
        <el-table-column property="category" label="类别" sortable />
        <el-table-column property="area.areaName" label="区域" />
        <el-table-column property="spot.spotName" label="点位" />
        <!-- <el-table-column property="competentUnit" label="主管单位" /> -->
        <!-- <el-table-column property="maintainProject" label="维护项目" /> -->
        <el-table-column property="warrantyDuration" label="质保时长" />
        <el-table-column property="maintainUnit" label="维护单位" />
        <el-table-column property="maintainState" label="维保状态" />
        <el-table-column property="deviceState" label="设备状态" />
        <el-table-column
          align="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="repairDevicesDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper, slot"
        :total="repairOrder.repairDevices.length"
        prev-text="上一页"
        next-text="下一页"
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <div slot="footer">
        <el-button @click="dialogRepairDevicesTable = false">取 消</el-button>
      </div>
    </el-dialog>

data(){
    return{
      repairOrder: {
        organizer: '',
        initiationMethod: '',
        faultTypes: [],
        faultDescription: '',
        repairDevices: [],
        faultTime: null,
        faultImgs: [],
        priority: ''
      },
      dialogRepairDevicesTable: false,
      currentPage: 1,
      pageSize: 5
    }
}

repairDevicesDelete(index, row) {
      this.repairOrder.repairDevices.map((e, i) => {
        if (e.uuid === row.uuid) {
          this.repairOrder.repairDevices.splice(i, 1)
        }
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNumRepairDevices = val
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNumRepairDevices = 1
      this.pageSizeRepairDevices = val
    },