element el-table 表格尾合计

实现效果

 代码

import { parseAmount, parseToThousand } from '@/utils/format-data'
import { reactive, ref } from 'vue'
import Big from 'big.js'

/**
 * 表尾合计行
 * @param dynamicCalculation 表格最后一项是否为动态输入
 * @param defineData 需要计算的字段组成的数组
 * @returns {{getSummaries: ((function(*): ([]||undefined))|*), applyAmount: Ref<T<number>>}}
 */
export default function useTableTotal(dynamicCalculation = false, { defineData = [] } = {}) {
  const applyAmount = ref(0)
  const getSummaries = (param) => {
    try {
      if (!param || !param.columns || !param.data || param.data.length === 0) {
        // console.warn('Invalid param received in getSummaries.')
        return []
      }

      const { columns, data } = param
      const sums = new Array(columns.length).fill(null)
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }

        if (defineData.includes(column.property)) {
          let columnSum = new Big(0)
          data.forEach((item) => {
            if (item[column.property]) {
              const num = parseAmount(item[column.property])
              if (typeof num === 'number' && !isNaN(num)) {
                columnSum = columnSum.plus(new Big(num))
              }
            }
          })
          sums[index] = columnSum.toNumber() // 转回普通数字以便后续处理
        }
      })
      if (dynamicCalculation) {
        if (sums.length === columns.length) {
          const num = sums[sums.length - 1]
          applyAmount.value = num !== null ? new Big(num).toNumber() : 0
        }
      }
      return parseToThousand(sums) // 去除未设置的初始值(null)
    } catch (error) {
      console.error('An error occurred while calculating summaries:', error)
      return []
    }
  }

  // 分页
  const requestData = reactive({
    pageSize: 20,
    pageNumber: 1
  })

  // 总数
  const total = ref(0)

  return {
    applyAmount,
    requestData,
    total,
    getSummaries
  }
}

 applyAmount：为表格最后一项动态输入的总和

使用 (根据prop字段)

const { requestData, total, getSummaries } = useTableTotal(false, {
  defineData: ['contractAmount', 'settlementAmount', 'totalPaid', 'unpaid']
})
...
<el-table :data="tableData" :max-height="maxHeight" :summary-method="getSummaries" border show-summary>
...
<el-table-column align="right" label="合同额" prop="contractAmount" />
<el-table-column align="right" label="结算额" prop="settlementAmount" />
<el-table-column align="right" label="累计已付款" prop="totalPaid" />
<el-table-column align="right" label="未付款" prop="unpaid" />
...