【element-ui】table表格底部合计自定义配置

痴心阿文

已于 2022-11-16 10:44:09 修改

阅读量5.4k

点赞数 8

分类专栏： ElementUi 文章标签： vue.js elementui javascript

于 2022-11-16 10:01:50 首次发布

本文链接：https://blog.csdn.net/zhangxueyou2223/article/details/127878823

版权

ElementUi 专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何在Element-UI的Table组件中实现自定义底部合计行，特别是针对部分列不需要合计的情况。通过设置`show-summary`和`summary-method`属性，并提供`getSummaries`方法来计算指定列的总计。此外，还展示了如何通过CSS调整合计行的位置到表格首行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

带合计的表格设置

自定义方法 getSummaries

【element-ui】table表格底部合计自定义配置，最近做管理系统用到饿了么UI，用到了table表格合计需求，常用的table底部，有时候不是所有内容都需要合计，比如上图这个编号是数字，但是不需要合计计算处理的，这时候就需要用到自定义表格，把不需要合计的内容隐藏掉，效果如下：

方法写在下面：

带合计的表格设置

1.参数 show-summary

2. 方法 :summary-method="getSummaries"

<!--带合计的表格设置-->   
<el-table :data="infolist" border show-summary  style="width: 100%;"
          @selection-change="selectionChangeHandleMateria" max-height="450"  :summary-method="getSummaries">
          <el-table-column type="selection" align="center" header-align="center" width="50"></el-table-column>
          <el-table-column prop="short_name" header-align="center" label="简称" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="goods_code" header-align="center" label="商品编码" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="goods_name" header-align="center" label="商品名称" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="goods_spec" header-align="center" label="规格" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="water_quantity" header-align="center" label="水份含量(%)" align="center"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="material_quantity" header-align="center" label="原料重量(kg)" align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-model="scope.row.material_quantity" placeholder="请输入数量"></el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <i class="icon-btn el-icon-delete" @click.stop="deleteInfo(scope.row)"></i>
            </template>
          </el-table-column>
        </el-table>

自定义方法 getSummaries

//自定义方法
  getSummaries(param) {
        const { columns, data } = param;
        const sums = {};
        columns.forEach((column, index) => {
            if (index === 0) {
                sums[index] = '合计';
                return;
            }
            // if (index === 3) {
            //     sums[index] = '';
            //     return;
            // }
            const values = data.map(item => Number(item[column.property]));
            if (column.label == "水份含量(%)" || column.label == "原料重量(kg)") {
              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] += ' kg';
              } else {
                  // sums[index] = 'N/A';
              }
            }
        });
        return sums;
    },

最后，关于表格底部样式问题，官方默认合计行在表格尾部展示，以下为更改合计行的位置，放表格的首行位置，通过css实现可以加以下代码：

//  /deep/ 为深度操作符，可以穿透到子组件
            /deep/ .el-table {
                display: flex;
                flex-direction: column;
            }
            //  order默认值为0，只需将表体order置为1即可移到最后，这样合计行就上移到表体上方
            /deep/ .el-table__body-wrapper {
                order: 1;
            }

结束