ant design vue 2.x合计带分页功能

官网分页功能
参考链接

项目要求

后端返回所有数据剩余金额的合计数，随筛选条件变化。所以需要后端计算出合计金额。
两种方案：

1. 后端单独返回合计金额，由前端插入到dataSource中进行展示。
2. 后端将合计金额追加到返回数据的最后，进行展示。
   本文中使用第二种方法，并将分页的统计数字进行修正。

实现效果

合计

过程

请求参数与返回结果

与后端的请求参数按照实际的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