【关于Element UI中el-table组件】summary-method属性表格底部固定两行并动态赋值计算两列总值之和

halo小伙伴们，小编之前有写过一篇关于el-table组件底部固定两行并动态赋值的文章；在前几天，小编又有一个需求也是底部固定两行的，但是这次有个需求就是其中一列是等于表格的其中两列之和。所以之前的方法是不可行的了，这次换一种赋值方法：
最终结果是要实现如下图所示的表格：

其中带有本页合计和总合计，这里总的合计是后端传来的值。本页合计是前端计算上去的。
首先el-table需要绑定 :summary-method=“getSummaries” 以及 show-summary

<el-table
      v-loading="loading"
      :data="tableData"
      :empty-text="emptyText"
      :highlight-current-row="highLightRow"
      stripe
      border
      style="width: 100%"
      :summary-method="getSummaries"
      show-summary
      @selection-change="selectionChangeHandle"
      @row-click="rowClickHandle"
    >

接着编写getSummaries方法

getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = <p>
            <div>本页合计</div>
            <br/>
            <div> 所有合计</div>
          </p>
        } else {
          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 Number((prev + curr).toFixed(2))
              } else {
                return Number(prev.toFixed(2))
              }
            }, 0)
            // 对个别行进行判断取值，因为totalAmount行是等于这两行之和的
            if (column.property === 'income') {
              this.income_ = sums[index]
            }
            if (column.property === 'cpc') {
              this.cpc_ = sums[index]
            }
            // 以下判断分割两行  一行本页（取值上面的值之和）  一行总计
            if (column.property === 'totalAmount') {
              sums[index] = <p>
                <div>{Number((this.income_ + this.cpc_).toFixed(2))}</div>
                <br/>
                <div ref={column.property}>{this.info[column.property + 'Total']}</div>
              </p>
              return
            } else {
              sums[index] = <p>
                <div ref={column.property + '_'}>{sums[index]}</div>
                <br/>
                <div ref={column.property}>{this.info[column.property + 'Total']}</div>
              </p>
              return
            }
          } else {
            sums[index] = '-'
            return
          }
        }
      })

      return sums
    },

这样就可以达到将其中列的值相加等于另一列需要的总计值。
后端的数据只需要传对应的列表数据加上一个所有总计即可。
好了，这是小编对于el-table的summary-method的一些使用。有更好的方法的小伙伴们记得跟小编分享一下你们的开发经验哦！