记录el-table合计行的使用

项目场景：

项目中需要为表格添加自定义合计行，定义某些数据不需要计算。

记录一下，方便以后复制。

---

解决方案：

在el的官方文档上，show-summary属性可以展示合计行，但是当需要自定义合计方法的时候就需要添加额外的summary-method属性，它接收一个方法作为计算方法。

 

 只要把写好的方法传递进去就可以自定义合计行了。

import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
interface Product {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}
interface SummaryMethodProps<T = Product> {
  // 每一行都展示些什么数据 比如 1.序号2.日期
  columns: TableColumnCtx<T>[]
  // 每一行的具体数据
  data: T[]
}
// 不需要计算的属性
const title: string[] = ['团号', '商品编码', '条码', '号牌', '内导', '分销商', '原单号', '内导编号', '分销商分类']

// 商场零售表单合计汇总
export default function formTotal (param: SummaryMethodProps) {
  const { columns, data } = param
  const sums: string[] = []
  columns.forEach((column, index) => {
    // 更改行名称
    if (index === 0) {
      sums[index] = '合计:'
      return
    }
    // 去除某些不需要计算的数据
    if (title.includes(column.label)) {
      sums[index] = ''
      return
    }
    // 把当前表格数据中同个分类的数据收集起来
    const values = data.map((item: any) => Number(item[column.property]))
    // 过滤掉
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = ` ${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          const num: number = prev + curr
          return Number(num.toFixed(2))
        } else {
          return Number(prev.toFixed(2))
        }
      }, 0)}`
    } else {
      // sums[index] = String(data.length)
      sums[index] = ''
    }
  })
  return sums
}

 新人代码，垃圾勿喷。