代码实现
<div class="tableBody" ref="tableBody"><table><div v-for="(item,index) in tableData":key="index"><el-table:data="item.list":show-header="index===0"borderref="table"show-summarywidth="100%":summary-method="getSummaries"><el-table-columnalign="center"prop="id"label="ID"width="400px"></el-table-column><el-table-columnalign="center"prop="name"label="姓名" width="400px"></el-table-column><el-table-columnalign="center"prop="amount1"label="数值1" width="400px"></el-table-column><el-table-columnalign="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;}
效果如下
另外当数据过多时想固定表头可参考以下链接内容：
实现固定表格自定义表头
实现table表格数据按名称字段分层 各层都有一个合计行 自定义的表格总合计行（vue.js+elementUI）
