526互联

Element Table 根据列的label class 自动计算合计

发布时间 2023-06-29 12:34:43作者: 暗恋桃埖源

定义 table 求和方法

export function getSummariesByTableColumn(param, opt) {
  opt.sumText ??= '合计'
  opt.getColProperty ??= rawProp => rawProp

  const { columns, data } = param

  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums.push(opt.sumText)
      return
    }
    if (!column.labelClassName?.includes('need-sum')) { // 不需要求和
      sums.push('-')
      return
    }

    const property = opt.getColProperty(column.property)
    const values = data.map(item => Number(item[property]))

    sums[index] = values.reduce((prev, curr) => {
      const value = Number(curr)
      if (!isNaN(value)) {
        return prev + curr
      } else {
        return prev
      }
    }, 0)
  })
  return sums
}

在 table 上使用

    <el-table
    ...
    show-summary
    :summary-method="param => getSummariesByTableColumn(param)"
  >
    <el-table-column
        ...
        label="损耗数量"
        prop="count"
        label-class-name="need-sum"
    />
    ...
  </el-table>

这样就实现了一个比较通用 table 求和方法，不用当 table 需要求和时都要单独写一个 summary-method 方法，在内部在声明需要求和列的字段，进行求和运算。