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>

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

扫描二维码关注公众号，回复： 14522095 查看本文章

  sums[4] = <el-button type="text" onClick={
    
    () => this.editRemark(this.firstTable.totalNum)}>编辑</el-button>;

那为什么可以这样写呢？合计行应该是借助了vue的render函数生成的，对render函数不太熟的可以看一下我的这篇文章：Vue使用render函数（以js文件的形式生成组件