使用vue+element-ui的summary-method方法做列合计

使用vue+element-ui的summary-method方法做列合计

// html代码

<el-table
  :data="tableData1"
  style="width: 100%"
  border
  show-summary
  :summary-method="getSummaries"
>
</el-table>

// 合计列方法

//合计
getSummaries (param) {
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) { // 合计行自定义名称
      sums[index] = '整体收益'
      return
    }
    const values = data.map(item => {
      return Number((item[column.property] + "").replace(/%/, ""))//净化数值
    })
    if (!values.every(value => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)
      sums[index] += ' %'
    } else {
      sums[index] = 'N/A'
    }
  })
  return sums
}

效果图如下