The element ui table table calculates the total number demo effect of the last column (sorting)

Table's aggregate function
Requirements: Calculate the sum of the last column in the table, and other numeric columns will not be calculated.

The example on the official website calculates the sum of all numeric columns. So you need to handle it yourself.

Refer to the knowledge points on the official website:
summary-method The implementation code of the custom total calculation method Function({ columns, data })
is as follows:

Add to table: summary-method="getSummaries"

 <el-table ref="table" size="small" :data="shopList" fit show-summary :summary-method="getSummaries">
	  <el-table-column label="项目" align="center" prop="proName"></el-table-column>
	  <el-table-column label="单笔(元)" align="center" prop="perMoney"></el-table-column>
	  <el-table-column label="数量" align="center" prop="num"></el-table-column>
	  <el-table-column label="合计(元)" align="center" prop="total"></el-table-column>
</el-table>

The corresponding function is as follows:

getSummaries(param) {
//此处打印param可以看到有两项，一项是columns，一项是data，最后一列可以通过columns.length获取到。
  const { columns, data } = param
  const len = columns.length
  const sums = []
  columns.forEach((column, index) => {
  //如果是第一列，则最后一行展示为“总计”两个字
    if (index === 0) {
      sums[index] = '总计'
      //如果是最后一列，索引为列数-1，则显示计算总和
    } else if (index === len - 1) {
      const values = data.map(item => Number(item[column.property]))
      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)
      } else {
        sums[index] = 'N/A'
      }
      //如果是除了第一列和最后一列的其他列，则显示为空
    } else {
      sums[index] = ''
    }
  })
  return sums
}