element中table表格合计只计算特定的列

关于表格最下面添加合计行

在官方文档中，有一种简单明了的方法，就是在表格直接加属性 show-summary ，那么最下面就直接出现一行合计，如果是存在文字的直接不展示，参考官网第一个例子即可。

但是我 在写的时候，发现这个属性只在第一次添加的时候出现合计行，我再刷新页面进行操作就没有了，我先是看了样式，发现被隐藏，又上网查资料，发现，原因：

是因为这个页面的表格有高度，而一开始加载出来的时候，合计行在表格外面被隐藏了。

解决的 方法是

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

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

overflow：visible 就是规定内容溢出盒子所发生的事情，

overflow：visible就是超出盒子仍然会显示。

这个时候需要注意，虽然一开始合计显示出来了，在你设置高的情况下，当你操作页面，合计就会跑到表格里面了（这个问题我也很苦恼，如果有大神知道可以请教一下）

当我今天来上班的是，组长说不能这样全计算，要计算指定列的合计，这个时候就用到了第二个官网中第二个案例了，加个方法

  <el-table
    :data="tableData"
    border
    height="200"
    :summary-method="getSummaries"
    show-summary
    style="width: 100%; margin-top: 20px">

:summary-method="getSummaries" 下面是官网的，但是没办法直接用，要修改一下。

 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;
      }

因为 我要计算指定列的，那我只需要在下面返回的时候，只取我想要的几列就可以了

   // 合计
    getSummaries(param) {
      const { columns, data } = param;  //columns是每列的信息，data是每行的信息
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";//此处是在index=0的这一列显示为“合计”
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        
        // console.log(values);    [2327682, 2322647]
        // console.log(column.property); //hflowAccStart  就是这一列的那个参数名，也是根据这个进行判断 prop绑定的字段

 //截至到这，上面和官网一样的 
//下面开始判断，你想要显示的每一列，去取他们的值返回
        if (
          column.property === "gflowAccPhr" ||
          column.property === "gheatAccPhr" ||
          column.property === "hflowAccPhr" ||
          column.property === "hheatAccPhr"
        ) {
//官网是不为空的条件，我改成我想要的列，
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        }
      });

      return sums;//然后....sums就是我想要的结果了
    },

这就是我最终的结果了