vue使用elementui表格el-table组件指定某列不进行合计

最新推荐文章于 2025-04-02 15:07:25 发布

原创最新推荐文章于 2025-04-02 15:07:25 发布 · 4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

elementui合计专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Vue项目中使用ElementUI的el-table组件实现表格合计功能，并排除特定列不参与合计。通过show-summary和summary-method属性自定义合计显示，提供了一个通用的summary-method方法示例。

vue使用elementui表格el-table组件指定某列不进行合计

使用步骤

效果图
在这里插入图片描述

1.添加表格自定义合计api— show-summary 和 summary-method

代码如下（示例）：

  <el-table
          :data="tableDataOfRight"
          style="width: 100%"
          :height="rightHeight"
          size="medium "
          highlight-current-row
          border
          show-summary
          :summary-method="totalOutPrice"
        >

2.通用summary-method方法，直接拷贝使用需自行修改不进行合计列的字段

代码如下（示例）：
price 是第一列的绑定字段

 totalOutPrice(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 (column.property != 'price') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        }
      });
      return sums
    },