实现table表格数据按名称字段分层，各层都有一个合计行，自定义的表格总合计行（vue.js+elementUI）

代码实现

<div class="tableBody" ref="tableBody">
      <table>
        <div v-for="(item,index) in tableData"
             :key="index">
            <el-table
                    :data="item.list"
                    :show-header="index===0"
                    border
                    ref="table"
                    show-summary
                    width="100%"
                    :summary-method="getSummaries">
                <el-table-column
                        align="center"
                        prop="id"
                        label="ID"
                        width="400px">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="name"
                        label="姓名" width="400px">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="amount1"
                        label="数值1" width="400px">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="amount2"
                        label="数值2"width="400px">
                </el-table-column>
            </el-table>
        </div>
        <div class='sum_footer' ref='sum_heji'>
            <div class='sum_footer_unit left'></div>
            <div class='sum_footer_unit'>本页合计</div>
            <div class='sum_footer_unit'>{{getTotal('amount1')}}</div>
            <div class='sum_footer_unit'>{{getTotal('amount2')}}</div>
        </div>
      </table>
    </div>

data(){
        return {
          initData:[{
            id: '12987122',
            name: '王小虎',
            amount1: 234,
            amount2: 3.2
          }, {
            id: '12987123',
            name: '王小虎',
            amount1: 165,
            amount2: 4.43
          }, {
            id: '12987124',
            name: '王小虎',
            amount1: 324,
            amount2: 1.9
          }, {
            id: '12987125',
            name: '王小虎',
            amount1: 621,
            amount2: 2.2
          }, {
            id: '12987126',
            name: '王小龙',
            amount1: 234,
            amount2: 3.2
          }, {
            id: '12987127',
            name: '王小龙',
            amount1: 165,
            amount2: 4.43
          }, {
            id: '12987128',
            name: '王小豹',
            amount1: 234,
            amount2: 3.2,
          }],
          tableData: []
        }
      },
      methods: {
          // 调节表格合计行宽度
          adjustWidth() {
            this.$nextTick(()=>{
                if(this.$refs.sum_heji && this.$refs.table){
                    let width = getComputedStyle(this.$refs.table[0].$refs.headerWrapper.querySelector('table')).width;
                    this.$refs.sum_heji.style = 'width:' + width;
                    this.$refs.sum_heji.style = 'overflow:' + 'auto';
                    Array.from(this.$refs.table[0].$refs.headerWrapper.querySelectorAll('col')).forEach((n, i) => {
                        if(n.getAttribute('width') != 0){
                            let childWidth = n.getAttribute('width') - 9;
                            this.$refs.sum_heji.children[i].style = 'width:' + childWidth + 'px';
                        }
                    });
                }
            })
          },
          // 表格合计
          getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 1) {
                        sums[index] = data[0].name + "合计";
                        return;
                    }else if(index > 1){
                        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] += "";
                        } else {
                            sums[index] = "";
                        }
                    }
                });
                return sums;
            },
             // 计算表格合计行
             getTotal (name) {
                var sum = 0;
                this.initData.forEach((n) => {
                    sum += parseFloat(n[name]);
                })
                sum = sum.toFixed(2)
                return sum;
            },
      },
      mounted(){
        // 监听窗口的变化
        window.onresize = () => {
            return (() => {
               this.adjustWidth()
            })()
        };
        // 将数据转化成我们想要的数据格式
        // tableData: [{
        //   name:'王小虎',
        //   list:[{
        //     id: '12987122',
        //     name: '王小虎',
        //     amount1: 234,
        //     amount2: 3.2,
        //   }, {
        //     id: '12987123',
        //     name: '王小虎',
        //     amount1: 165,
        //     amount2: 4.43,
        //     amount3: 12
        //   }, {
        //     id: '12987124',
        //     name: '王小虎',
        //     amount1: 324,
        //     amount2: 1.9,
        //   }, {
        //     id: '12987125',
        //     name: '王小虎',
        //     amount1: 621,
        //     amount2: 2.2,
        //   }]
        // },{
        //   name:'王小龙',
        //   list:[{
        //     id: '12987126',
        //     name: '王小龙',
        //     amount1: 234,
        //     amount2: 3.2,
        //   }, {
        //     id: '12987127',
        //     name: '王小龙',
        //     amount1: 165,
        //     amount2: 4.43,
        //   }]
        // },{
        //   name:'王小豹',
        //   list:[{
        //     id: '12987128',
        //     name: '王小豹',
        //     amount1: 234,
        //     amount2: 3.2,
        //   }]
        // }]
        // 数据按姓名字段分层
        this.initData.forEach(item1 => {
          if (this.tableData.length == 0) {
            this.tableData.push({name: item1.name, list: [item1]})
          } else {
            let res = this.tableData.some(item => {//判断相同姓名，有就添加到当前项
                if (item.name == item1.name) {
                    item.list.push(item1)
                    return true
                }
            })
            if (!res) {//如果没找相同姓名就添加一个新对象
              this.tableData.push({name: item1.name, list: [item1]})
            }
          }
        });
        this.adjustWidth()
        // setTimeout(()=>{
            // this.adjustWidth()
        // },200)
        console.log(this.tableData)
      }
    })

.tableBody{ 
      /* 让表格字段过多时也只存在一个横向滚动条 */
        display:flex;
        flex-wrap:wrap;
        align-content:flex-start;
        overflow:auto;
}
.sum_footer {
        display: flex;
        display: -webkit-flex;
        height: 40px;
        overflow: visible!important;
}
.sum_footer_unit {
        flex-shrink:0;
        font-size: 13px;
        font-weight: 800;
        color: #606266;
        padding: 0 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        word-break:break-word;
        border-bottom: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        border-top: 1px solid #ebeef5;
        text-align: center;
}
.left {
        border-left: 1px solid #ebeef5;
}

效果如下

另外当数据过多时想固定表头可参考以下链接内容：

实现固定表格自定义表头