element中el-table（合计）计算指定列

element中el-table（合计）计算指定列

想要某列展示合计数值的

 <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#F8F9FB' }"
        :summary-method="getSummaries" //重点1
        show-summary//重点2
      >
    <el-table-column align="center" label="余额" min-width="100" prop="money">//重点3 prop=""
          <template slot-scope="{ row }">
            {{ row.money || '-' }}
          </template>
        </el-table-column>
     </el-table>

 // 计算总计价格
    getSummaries(param) {
      const { columns, data } = param //这里可以看出，自定义函数会传入每一列，以及数据
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        } else if (index === 3 || index === 4) {
          //index===2||index===8和9和12后的列进行求和
          //页面分别统计 处理
          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)

            //此处结合了方式一的判断处理，实现多种条件处理
            //此处的column.property获取的值对应中prop对应的字段
            switch (column.property) {
              case 'total1':
              case 'total2':
              case 'total3':
                return (sums[index] = sums[index])
                break
            }
          } else {
            sums[index] = '' //如果列的值有一项不是数字，就显示这个自定义内容
          }
        } else {
        }
      })
      return sums //最后返回合计行的数据
    },