【Element plus】table合计自定义计算平均值

使用element plus表格时，需要用到合计，但是合计默认累加，部分项需要求平均值，例如成绩

 

 将 show-summary 设置为true就会在表格尾部展示合计行。使用 summary-method 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中

<template>
  <el-table :data="tableData" style="width: 500px"
  border
  show-summary
  :summary-method="getSummaries"
  >
    <el-table-column type="index" width="70" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="cost" label="支出" />
    <el-table-column prop="grade" label="成绩" />
  </el-table>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue';
const tableData = [
  { name: 'Tom', cost: 20, grade: 89 },
  { name: 'Tom', cost: 10, grade: 79 },
  { name: 'Tom', cost: 50, grade: 69 },
]

const getSummaries = (param) => {
  const { columns, data } = param
  const sums= []
    columns.forEach((column, index) => {

    // 设置第一列想显示的字
    if (index === 0) {
      sums[index] = '合计'
      return
        }
  
      const values = data.map((item) => Number(item[column.property]))
  
      if (index != 3) {  // 想自定义求平均数的列
        // Number.isNaN(value)) 判断value是否是数值类
      if (!values.every((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] = '-'
      }
    } else {
      let sum = 0;
      values.forEach(item => {
        sum = sum + item;
      })
      sums[index] = (sum / values.length);
    }
  })
  return sums
}
</script>