官網(wǎng)分頁功能
參考鏈接

項目要求

后端返回所有數(shù)據(jù)剩余金額的合計數(shù)，隨篩選條件變化。所以需要后端計算出合計金額。
兩種方案：

1. 后端單獨返回合計金額，由前端插入到dataSource中進(jìn)行展示。
2. 后端將合計金額追加到返回數(shù)據(jù)的最后，進(jìn)行展示。
   本文中使用第二種方法，并將分頁的統(tǒng)計數(shù)字進(jìn)行修正。

實現(xiàn)效果

合計

過程

請求參數(shù)與返回結(jié)果

與后端的請求參數(shù)按照實際的pageSize進(jìn)行請求；在返回數(shù)據(jù)后修改pageSize和Total

      let pageSize = 0
      // 請求為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
          // 重新計算總數(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加一，讓頁面展示可以展示出來
        }
        this.loading = false
      })

后端接口返回

后端返回數(shù)據(jù)

分頁修改

showTotal修改分頁顯示內(nèi)容

      /* 分頁參數(shù) */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['11', '21', '31', '41', '51', '101'], // 保證每頁數(shù)據(jù)為10條，不算合計
        // pageSizeOptions: ['10', '20', '30', '40', '50', '100'],
        showTotal: (total, range) => {
          // 重新計算顯示條數(shù),按照實際的進(jìn)行統(tǒng)計
          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) {
            // 如果是合計，不計算排序數(shù)字
            if (r.id === '1') { return '合計' } else { return parseInt(index) + 1 }
          }
        },

image.png