element plus自定义表尾合计方法

在element plus提供的初始方法里根据实际需求进行更改

默认方法 Table 表格 | Element Plus

自定义方法

首先在el-table加入自定义方法

<el-table
      id="table"
      ref="tableRef"
      v-loading="loading"
      border
      :data="state.tableList"
      highlight-current-row
      :summary-method="getSummaries"
      show-summary
      style="width: 100%"
    >

其中 

show-summary                                        表尾显示合计效果

:summary-method = ''getSummaries"       自定义表尾合计方法

然后在js部分编写自定义方法

//计算表尾合计
import type { TableColumnCtx } from 'element-plus'

interface Product {
  street: string
  // id: string
  // name: string
  // amount1: string
  // amount2: string
  // amount3: number
}

interface SummaryMethodProps<T = Product> {
  columns: TableColumnCtx<T>[]
  data: T[]
}
const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param
  const sums: string[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      // sums[index] = 'Total Cost'
      sums[index] = '合计'
      return
    }
    if (index === 3) {
      sums[index] = ''
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    // console.log(values, '表尾合计')
    // if (!values.every((value) => Number.isNaN(value)))
    if (!values.some((value) => Number.isNaN(value))) {
      sums[index] = ` ${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}`
    } else {
      sums[index] = ''
    }
  })
  return sums
}

这里   我的处理条件为  首先  不展示index为3 的数字类型    我取的是数据字典   会转为文本效果

使用some做了一个筛选。如果该列的数据存在不为number类型的数据

显示为空字符串  其余的进行累加操作。