vue：table自定义合计

需求：表格显示合计，合计自己需要显示的数据，不需要显示的用（-）显示

1、在table里添加 ref=“table” show-summary summary-method

<el-table ref="table" :data="tableData" border height="690" show-summary :summary-method="getSummaries">
        <el-table-column label="日期" prop="times" width="120" sortable />
</el-table>

2、在methods方法里增加合计方法

getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          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)
            switch (column.property) {
              case 'money':
                sums[index] = sums[index].toFixed(2) //保留两位小数
                break
              case 'release':
                sums[index] = '-'
                break
              case 'payment':
                sums[index] = '-'
                break
              default:
                break
            }
          } else {
            sums[index] = '-'
          }
        })

        return sums
      },

3、自定义合计没有效果（因为给table加了一个固定高度），这时候需要在table里加ref=“table”,获取数据tableData添加以下内容

this.$nextTick(() => {
   this.$refs['table'].doLayout();
})

（ps可以不给固定高度，也可以使用max-height）