element table只計算最後一列資料總和

需求：element table只計算表格中最後一列的總和

官網中的示例是所有數字列都進行計算總和的。所以需要自己處理。

1、HTML

<el-table 
        border
        show-summary 
        :summary-method="getSummaries"
        :formatter="formatter"  
        :default-sort = "{prop: 'projectName', order: 'descending'}" 
        :data="performanceList"
>
        <el-table-column sortable type="index"  label="序號" align="center" width="50" />
        <el-table-column  prop="projectName" label="專案名稱" align="center" />
        <el-table-column sortable prop="originalPrice"  label="專案金額" align="center" />
        <el-table-column sortable prop="deductRatio" label="折扣 %" align="center" />
        <el-table-column prop="planName" label="劃扣方案" align="center" />
        <el-table-column prop="stepName" label="劃扣步驟名稱" align="center" />
        <el-table-column sortable prop="stepRatio" label="劃扣步驟比例 %" align="center" />
        <el-table-column sortable prop="deductExecutionDate" label="專案劃扣執行時間" align="center" />
        <el-table-column sortable prop="deductAmount" label="劃扣金額" align="center" />
        </el-table>

2、JS 此處方法無需修改、通用的、拿來即用

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
  }

3、效果圖

完美撒花！！！！！！！