项目要求
后端返回所有数据剩余金额的合计数，随筛选条件变化。所以需要后端计算出合计金额。
两种方案：
- 后端单独返回合计金额，由前端插入到dataSource中进行展示。
- 后端将合计金额追加到返回数据的最后，进行展示。
本文中使用第二种方法，并将分页的统计数字进行修正。
实现效果
合计
过程
请求参数与返回结果
与后端的请求参数按照实际的pageSize进行请求；在返回数据后修改pageSize和Total
let pageSize = 0
// 请求为10的倍数不减一，否则减一
if (this.ipagination.pageSize % 10 === 0) {
pageSize = this.ipagination.pageSize
} else {
pageSize = this.ipagination.pageSize - 1
}
var pageParams = {
curPage: this.ipagination.current,
pageSize: pageSize,
// pageSize: this.ipagination.pageSize,
conditions: [...this.searchParams],
orderBys: [...this.orderBys]
}
this.loading = true
postAction(this.url.list, params).then((res) => {
if (res.status === 200 && res.success) {
this.dataSource = res.response.data
// 重新计算总数，防止丢数据
this.ipagination.total = res.response.dataCount + parseInt(res.response.dataCount / res.response.pageSize) + 1
this.ipagination.pageSize = res.response.pageSize + 1 // 结果pagesize加一，让页面展示可以展示出来
}
this.loading = false
})
后端接口返回
后端返回数据
分页修改
showTotal修改分页显示内容
/* 分页参数 */
ipagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['11', '21', '31', '41', '51', '101'], // 保证每页数据为10条，不算合计
// pageSizeOptions: ['10', '20', '30', '40', '50', '100'],
showTotal: (total, range) => {
// 重新计算显示条数,按照实际的进行统计
let start = 0
let end = 0
if (range[0] % this.ipagination.pageSize === 0) {
start = range[0] - parseInt(range[0] / this.ipagination.pageSize)
} else {
start = range[0] - parseInt(range[0] / this.ipagination.pageSize)
}
if (range[1] % this.ipagination.pageSize === 0) {
end = range[1] - parseInt(range[1] / this.ipagination.pageSize)
} else {
end = range[1] - parseInt(range[1] / this.ipagination.pageSize) - 1
}
return start + '-' + end + ' 共' + (total - parseInt(total / this.ipagination.pageSize) - 1) + '条'
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
序号修改
{
title: '序号',
dataIndex: 'id',
key: 'rowIndex',
align: 'center',
customRender: function (t, r, index) {
// 如果是合计，不计算排序数字
if (r.id === '1') { return '合计' } else { return parseInt(index) + 1 }
}
},
image.png
