element-ui 利用show-summary，summary-method 进行自定义列合计

背景

由于业务需求，需要对el-table某一列进行合计操作。如果只是进行表格数字合计操作的话，直接在el-table上设置show-summary属性为true就行了，但是如果你要进行自定义的列合计那么就需要用到另一个属性summary-method。

具体实现

summary-method顾名思义就是传入一个合计的方法，通过查看elment-ui官方文档 我们可以发现这个方法有一个操作对象，并且该对象上存在两个参数columns和data，它们分别表示列对象（包含列的相关信息，关键是property）和表格数据。

话不多说直接贴实现代码，具体实现如下：

// 首先声明一个getSummeries方法, 通过解构获取 columns 和 data 属性
function getSummaries({ columns, data }) {
  const sums = []
  let isPercentage = false // 如果是百分比则取平均数，这里是业务需要进行如果表格对应的列展示的是百分比时进行取平均值处理

  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return;
    }
    const values = data.map(item => {
      let value = item[column.property]
      // 处理是百分比的情况，如果只是合计列可忽略这段代码，直接 return Number(item[column.property])
      if (typeof value == 'string' && value.endsWith('%')) {
        isPercentage = true
        value = value.substring(0, value.length - 1)
      } else {
        isPercentage = false
      }
      return Number(value)
    })
    if (!values.every(item => isNaN(item)) {
      const total = values.reduce((a, b) => a + b, 0)
      if (isPercentage) {
      // toFixed 保留小数点后两位
        sums[index] = (total / data.length).toFixed(2) + '%'
      } else {
        sums[index] = total
      }
    } else {
      sums[index] = '--'
    }
  })
  return sums
}

我们也可以通过更改上述代码，设置特定的index列或是通过item[column.property] === 'xxx'进行判断，使得对应的列进行合计运算，其他列虽然也是数字但通过这样的处理就不会进行合计运算啦。