前言
基本内容自行查看官方文档,这里说一下比较特殊的需求。
合计行不显示
问题 最近做表格合计发现,合计行在页面初次加载时不会显示,但是窗口大小改变后,合计行正常显示。
解决
数据变化,触发组件的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文件的形式生成组件