前言
基本内容自行查看官方文档，这里说一下比较特殊的需求。
合计行不显示
问题最近做表格合计发现，合计行在页面初次加载时不会显示，但是窗口大小改变后，合计行正常显示。
解决
数据变化，触发组件的updated生命周期，对 Table 进行重新布局
<el-tableref="tableRef"show-summaryborder></el-table>updated () {this.$nextTick(() => {this.$refs.tableRef.doLayout();})},
多行合计
正常合计都是一行的，官方文档的例子也是单行合计的。奈何产品经理搞了个多行合计。
这个查了一下，合并方法返回的那个数组，数组元素可以是html标签。
实例
// 获取合计信息getSummaries(param) {const {columns, data } = param;const sums = [];columns.forEach((column,index) => {if(index == 0) {sums[0] = <div><div>合计</div><hr /><div> 备注</div></div> ;}});return sums;}
结果
合计列合并
多行合计也就罢了，还搞个列合并，真的是头都要大了。要搞一个下面这样的
打印输出一下：column，这是个对象，里面有个colSpan，可以用这个属性来控制合并几列
// 获取合计信息getSummaries(param) {const {columns, data } = param;const sums = [];columns.forEach((column,index) => {if(index == 0) {sums[0] = <div><div>合计</div><hr /><div> 备注</div></div> ;column.colSpan = 3;// console.log(column);}else if(index == 1) {sums[1] = <div><div style="display:flex;"><div style="flex:1;border-right:1px solid;">1</div><div style="flex:1;border-right:1px solid;">1</div><div style="flex:1;border-right:1px solid;">1</div><div style="flex:1;border-right:1px solid;">1</div><div style="flex:1;border-right:1px solid;">1</div><div style="flex:1;border-right:1px solid;">1</div><div style="flex:1;border-right:1px solid;">1</div><div style="flex:1;border-right:1px solid;">1</div><div style="flex:1;">1</div></div><hr /><div> 11月投产525台</div></div>;column.colSpan = 9;}});return sums;}
结果
补充：
有个地方需要注意一下，上面表格的那几列（从投产数量到总装中），每一列的最小宽度min-width设置相同的值，这样可以尽可能保证每一列的宽度一致。下面的合计用弹性布局，让每一个div的宽度一致并且与上面的列尽可能对应。
如果要使用data里的属性要如下操作：
data() {return {name: 'sss'};},<div style="flex:1;border-right:1px solid;">{this.name}</div>
如果你要是想加一个事件呢？别说还真行
sums[4] = <el-button type="text" onClick={() => this.editRemark(this.firstTable.totalNum)}>编辑</el-button>;
那为什么可以这样写呢？合计行应该是借助了vue的render函数生成的，对render函数不太熟的可以看一下我的这篇文章：Vue使用render函数（以js文件的形式生成组件
