【记录5】el-table合计行不显示，除页面缩放或者F12

项目场景：

根据需求给表格加合计行，element中有相关基本案例，可通过el-table中show-summary和summary-method方法实现

---

官方文档解释

将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。

1 问题一描述：如何控制哪些列不显示合计？哪些列显示合计？

如何控制哪些列不显示合计？哪些列显示合计？
官方给的案例：

getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      }
    }

---

解决方案：

我们只需要将不展示的列结果变为空即可

//  这里实现了第一列显示“合计”二字
if (index === 0) {
    sums[index] = '合计';
    return;
}

//  假设需要第5列、第8列、第9列合计时，下方显示空
if (index === 5 || index === 8 || index === 9 ) {
   sums[index] = '';
   return;
}

还有一种代码少的方法：（相对上面的方法）。这个方法只需要将你想显示的列合计列数写入即可，比如：该代码是实现第1列合计行显示“合计”，其它列只显示 第5列、第9列、第10列的求和值

handleSummary(params){  //表格数值合计
     const { columns, data } = params;
     const sums = [];
     columns.forEach((column, index) => {
     if (index === 0) {
         sums[index] = '合计';
         return;
     }else if(index === 5 || index === 9 || index === 10){
         const values = data.map(item => Number(item[column.property]));
         if (!values.every(value => isNaN(value))) {
             sums[index] = values.reduce((prev, curr) => {
                 const value = Number(curr);
                 if (!isNaN(value)) {
                     return prev + curr;
                 } else {
                     return prev;
                 }
             }, 0);
             sums[index] = sums[index].toFixed(2)  //保留两位小数
         } else {
             sums[index] = '';  //空
         }
     }
     });
     return sums;
 },

2 问题二描述：就是正常进入页面合计行没有出现，只有按F12、F11,及页面缩放才会显示出来，而我们要的是直接显示出合计行

合计行显示后，出现了一个新的问题：就是正常进入页面合计行没有出现，只有按F12、F11,及页面缩放才会显示出来，而我们要的是直接显示出合计行

---

原因分析：

页面渲染在数据接收之前，而导致的：因为页面渲染时表格中是空，没有数据的，而在页面缩放会导致页面再次渲染，但实际中用户不可能这样去操作啊，这里我们可以了解下vue生命周期中的update阶段重新渲染页面

---

解决方案：

这里作者查了一些资料

方法一：借助生命周期updated重新渲染页面，完美解决合计行不显示问题**推荐**

updated(){
    this.$nextTick(() => {
        this.$refs['table'].doLayout()   
        // table是在表格中ref=‘table’
        // doLayout	对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法
    })
},

下面小编再给大家说几个其它方法，小编测试结果：没有解决掉，这里小编写出来的原因是。担心方法一未解决的你问题，你可以尝试下面几个方法。

方法二：来源于其它文章

this.tableData.push({})
this.tbaleData.pop()

方法三：来自其它文章查看

.el-table{
   overflow:visible !important;
}

方法二、方法三可以去了解下。

现在又遇到一个新的问题：合计行在滚动条的下方，小编解决方案随后写上。如问题三

问题三：合计行出现了表格滚动条下方

解决方法和要求，小编将合计行放在了表格表头

解决方案

css

.el-table {
    display: flex;
    flex-direction: column;
  }
  /* order默认值为0，只需将表格主体order设为1即可移到最后，合计就上移到最上方了 */
 .el-table__body-wrapper {
    order: 1;
  }
  deep/ .el-table__fixed-body-wrapper {
	top: 96px !important;
}
 .el-table__fixed-footer-wrapper {
	z-index: 0;
}