Element ui 表格求和/解决合计行不显示的问题

1. 表格属性添加：:summary-method="getSummaries" show-summary ref="tableData"

<template>
    <div>
        <el-table 
         :data="tableData" 
         :summary-method="getSummaries" 
         show-summary 
         ref="tableData"
        >
          <el-table-column 
            v-for="(item,index) in columns" 
            :key="index" 
            :label="item.label" 
            :prop="item.key" 
            :show-overflow-tooltip="true" 
            align="center"
           >
           </el-table-column>
        </el-table>
    </div>
</template>

2. data中的表格数据（tableData为空时，合计行不会显示）

columns:[
            { key:"id",label:"ID" },
            { key:"name",label:"姓名" },
            { key:"amount",label:"金额" },
        ],
tableData:[
            { id: "A001", name: "张三", amount: "100" },
            { id: "A002", name: "张三", amount: "200" },
        ], // （tableData为空时，合计行不会显示）

3. methods中的方法

    /**
     * 表格求和
     * @param { Object } param 
     * @returns { Array } 
     */
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        // 先令每列sum值为空
        sums[index] = ''
        // 第一列显示"合计"
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        // 这里假设只求和amount列
        if (column.property === 'amount') {
          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);
            // 保留两位小数
            // sums[index] = sums[index].toFixed(2)
            sums[index] += ' 元'
          }
        }
      })
      return sums
    }

4. updated: 在vue渲染结束后重新绘制表格，解决合计行不显示的问题

* 另一种方法是给表格添加行高，可参考：element table合计行不显示问题_:summary-method不显示-CSDN博客

  updated() {
    // 在vue渲染结束后重新绘制表格,解决合计行不显示的问题
    this.$nextTick(() => {
     this.$refs.tableData.doLayout();
    })
  },

5. 修改表格合计行的背景色

<style scoped>
/deep/ .el-table__footer-wrapper tbody td.el-table__cell{
  background-color: transparent;
}
</style>

---

参考：

[1] Element - The world's most popular Vue UI framework

[2] https://www.cnblogs.com/MrDin/p/14984677.html