項(xiàng)目要求
后端返回所有數(shù)據(jù)剩余金額的合計(jì)數(shù)始苇，隨篩選條件變化企量。所以需要后端計(jì)算出合計(jì)金額躯舔。
兩種方案：
- 后端單獨(dú)返回合計(jì)金額滞谢，由前端插入到dataSource中進(jìn)行展示。
- 后端將合計(jì)金額追加到返回?cái)?shù)據(jù)的最后锁保，進(jìn)行展示薯酝。
本文中使用第二種方法，并將分頁(yè)的統(tǒng)計(jì)數(shù)字進(jìn)行修正爽柒。
實(shí)現(xiàn)效果
合計(jì)
過(guò)程
請(qǐng)求參數(shù)與返回結(jié)果
與后端的請(qǐng)求參數(shù)按照實(shí)際的pageSize進(jìn)行請(qǐng)求吴菠；在返回?cái)?shù)據(jù)后修改pageSize和Total
let pageSize = 0
// 請(qǐng)求為10的倍數(shù)不減一，否則減一
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
// 重新計(jì)算總數(shù)浩村，防止丟數(shù)據(jù)
this.ipagination.total = res.response.dataCount + parseInt(res.response.dataCount / res.response.pageSize) + 1
this.ipagination.pageSize = res.response.pageSize + 1 // 結(jié)果pagesize加一做葵，讓頁(yè)面展示可以展示出來(lái)
}
this.loading = false
})
后端接口返回
后端返回?cái)?shù)據(jù)
分頁(yè)修改
showTotal修改分頁(yè)顯示內(nèi)容
/* 分頁(yè)參數(shù) */
ipagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['11', '21', '31', '41', '51', '101'], // 保證每頁(yè)數(shù)據(jù)為10條，不算合計(jì)
// pageSizeOptions: ['10', '20', '30', '40', '50', '100'],
showTotal: (total, range) => {
// 重新計(jì)算顯示條數(shù),按照實(shí)際的進(jìn)行統(tǒng)計(jì)
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
},
序號(hào)修改
{
title: '序號(hào)',
dataIndex: 'id',
key: 'rowIndex',
align: 'center',
customRender: function (t, r, index) {
// 如果是合計(jì)心墅，不計(jì)算排序數(shù)字
if (r.id === '1') { return '合計(jì)' } else { return parseInt(index) + 1 }
}
},
image.png
