前端分页和后端分页就是请求的差异,前端分页的话只请求一次,所以要在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
},