element table实现多个底部合计

element table官方示例中只有单个底部合计的功能，但是官方提供的summary-method实现多个底部合计效果

具体实现思路就是利用summary-method中的sums是可以接受一个jsx的，那我们就可以利用
标签去实现换行效果，只是需要自己去计算生成好最后的html

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);
      sums[index] += ' 元';
    } else {
      sums[index] = 'N/A';
    }
  });

  return sums;
},

这个是官方示例中的方法，只需要将sums[index]等于一个jsx就能实现效果

sums[index] = (
  <p>
    <span>合计1</span>
    <br />
    <span>合计2</span>
  </p>
);

以下是完整示例代码

<template>
  <div>
    <el-table
      :data="tableData"
      border
      height="600"
      :summary-method="getSummaries"
      show-summary
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="amount1" label="数值 1（元）" />
      <el-table-column prop="amount2" label="数值 2（元）" />
      <el-table-column prop="amount3" label="数值 3（元）" />
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        },
        {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        },
        {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        },
        {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        },
        {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        },
        {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        },
        {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        },
        {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        },
        {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        },
        {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        },
        {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        },
        {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }
      ]
    };
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        const { property } = column;
        if (index === 0) {
          sums[index] = this.getJsx({
            page: '页合计',
            all: '总合计'
          });
          return;
        }
        if (index > 1) {
          const value = this.getTotalValue(property, data);
          sums[index] = this.getJsx(value);
        } else {
          sums[index] = '';
        }
      });

      return sums;
    },

    /** 获取jsx */
    getJsx(value) {
      let jsx = null;
      jsx = (
        <p>
          <span>
            {value.page ? (
              value.page
            ) : (
              <span style='visibility: hidden;'>0</span>
            )}
          </span>
          <br />
          <span>
            {value.all ? value.all : <span style='visibility: hidden;'>0</span>}
          </span>
        </p>
      );
      return jsx;
    },

    /** 根据自己的需求计算合计之后的数据 */
    getTotalValue(property, data) {
      let page = 0;
      let all = 0;
      data.forEach((ele) => {
        page = page + Number(ele[property]);
        all = all + Number(ele[property]) + 10;
      });
      return {
        page: page.toFixed(2),
        all: all.toFixed(2)
      };
    }
  }
};
</script>