ant-design-vue table表格添加合计行(完美解决篇)

思路：从后端获取数据后，前端计算生成合计行push到表格数据源中。

但是！！！ 这样会遇到问题：a-table返回数据大于pagination.pageSize数据不显示问题，这个是vue2、vue3都有的问题。

通俗点说，就是设定pageSize为10，后台也返回10条，但是通过push合计行变成了11条，这样会导致合计行不显示。

解决思路：请求数据之后设置pageSize+1，然后a-table的:pagination="false"，引用自定义的分页组件

先上效果图！！！

第一步：设置a-table的:pagination="false"

第二步：引入自定义分页组件

import Pagination from '@/components/jeecgbiz/Pagination' //引入 Pagination组件

components: {
    Pagination,
  },

第三步：形成合计行数据

全部源码如下：

<template>
  <a-card :bordered="false">
    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
      
        <span slot="action" slot-scope="text, record">
          <span v-if="record.rowIndex == '合计'"></span>
          <span v-else>
           <a @click="handleDetail(record)">详情</a>
          </span>
        </span>
      </a-table>
      <!-- 页面使用分页组件 -->
      <Pagination
        v-model="ipagination.current"
        :total="ipagination.total"
        show-size-changer
        :page-size="ipagination.pageSize"
        @onShowSizeChange="onShowSizeChange"
        :pageSizeOptions="ipagination.pageSizeOptions"
      ></Pagination>
    </div>

  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { getAction } from '@/api/manage'
import Pagination from '@/components/jeecgbiz/Pagination' //引入 Pagination组件

export default {
  name: 'template',
  mixins: [mixinDevice],
  components: {
    Pagination,
  },
  data() {
    return {
      description: '管理页面',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: 'rowIndex',
          // key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (text, r, index) {
            return text !== '合计' ? parseInt(index) + 1 : text
          },
        },
        {
          title: '月份',
          align: 'center',
          dataIndex: 'month',
          customRender: function (text) {
            return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
          },
        },
        {
          title: '编号',
          align: 'center',
          dataIndex: 'recordNo',
          customRender: (t) => ellipsis(t),
        },
        {
          title: '金额(不含税)',
          align: 'center',
          dataIndex: 'amount',
        },
        {
          title: '合同编号',
          align: 'center',
          dataIndex: 'contractSerialNumber',
          customRender: (t) => ellipsis(t),
        },
        {
          title: '合同标题',
          align: 'center',
          dataIndex: 'contractTitle',
          customRender: (t) => ellipsis(t),
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/fm/costInvoice/list'
      },
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '50', '100', '500'],
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      dictOptions: {},
      newArr: [],
      newDataSource: [],
      initDateSource: [],
      initPageSize: 10,
    }
  },
  created() {
    //初始化每页条数
    this.initPageSize = this.ipagination.pageSize
    this.loadData()
  },
  methods: {
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      //设置请求的条数为初始值
      this.ipagination.pageSize = this.initPageSize
      var params = this.getQueryParams() //查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.initDateSource = res.result.records || res.result
          this.newDataSource = res.result.records || res.result
          this.dataHandling()
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    /*如果分页走这个方法*/
    dataHandling() {
      //动态新增每页条数
      this.ipagination.pageSize = this.initPageSize + 1
      this.newArr = []
      var arrs = this.newDataSource
      if (arrs.length > 0) {
        let item = {}
        item.rowIndex = '合计'
        var amount = 0
        for (let i = 0; i < arrs.length; i++) {
          amount += arrs[i].amount
        }
        item.amount = amount
        this.newDataSource.push(item)
      }
      this.dataSource = Object.values(this.newDataSource)
    },
    // 分页改变时调用组件里的方法
    onShowSizeChange(current, pageSize) {
      this.ipagination.current = current
      this.ipagination.pageSize = pageSize
      //调整每页请求数值
      this.initPageSize = this.ipagination.pageSize
      this.loadData()
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>

自定义分页Pagination.vue

<template>
  <a-pagination
    v-model="current"
    :page-size-options="pageSizeOptions"
    :total="total"
    show-size-changer
    :page-size="pageSize"
    @showSizeChange="onShowSizeChange"
    :show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
  >
  </a-pagination>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0,
    },
    pageSizeOptions: {
      type: Array,
      default() {
        return ['10', '20', '30', '50', '100']
      },
    },
  },
  data() {
    return {
      pageSize: 10,
      current: 1,
    }
  },
  mounted() {},
  methods: {
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize
      this.current = current
      this.$emit('onShowSizeChange', current, pageSize)
    },
  },
  watch: {
    current(val) {
      this.$emit('onShowSizeChange', val, this.pageSize)
    },
  },
}
</script>

<style scoped>
.ant-pagination {
  text-align: right !important;
  margin-top: 20px !important;
}
</style>