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

您所在的位置：网站首页 › 怎么计算总计和合计 › Element 单元格合计（多行合计、合计列合并）

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

2023-08-17 12:21| 来源: 网络整理| 查看: 265

前言

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

合计行不显示

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

解决数据变化，触发组件的updated生命周期，对 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] = 合计备注 ; } }); return sums; }

结果在这里插入图片描述

合计列合并

多行合计也就罢了，还搞个列合并，真的是头都要大了。要搞一个下面这样的在这里插入图片描述打印输出一下：column，这是个对象，里面有个colSpan，可以用这个属性来控制合并几列

// 获取合计信息 getSummaries(param) { const { columns, data } = param; const sums = []; columns.forEach((column,index) => { if(index == 0) { sums[0] = 合计备注 ; column.colSpan = 3; // console.log(column); }else if(index == 1) { sums[1] = 1 1 1 1 1 1 1 1 1 11月投产525台 ; column.colSpan = 9; } }); return sums; }

结果在这里插入图片描述补充：

有个地方需要注意一下，上面表格的那几列（从投产数量到总装中），每一列的最小宽度min-width设置相同的值，这样可以尽可能保证每一列的宽度一致。下面的合计用弹性布局，让每一个div的宽度一致并且与上面的列尽可能对应。

如果要使用data 里的属性要如下操作：

data() { return { name: 'sss' }; }, {this.name}

如果你要是想加一个事件呢？别说还真行

sums[4] =

【本文地址】

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

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

今日新闻

推荐新闻