Element 单元格合计（多行合计、合计列合并）

前言

基本内容自行查看官方文档，这里说一下比较特殊的需求。

合计行不显示

问题最近做表格合计发现，合计行在页面初次加载时不会显示，但是窗口大小改变后，合计行正常显示。

解决
数据变化，触发组件的updated生命周期，对 Table 进行重新布局

<el-table　ref="tableRef"　show-summary　border>
</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文件的形式生成组件