el-table 添加合计，合计某一列

这篇具有很好参考价值的文章主要介绍了el-table 添加合计，合计某一列。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图：

el-table 添加合计，合计某一列,elementui,vue.js,elementui,javascript

1. 使用elementui 官网上的方法

如果是只要是数值，就要合并，就只设置show-summary 即可。

2. html：

<!--cell-style 改变某一列行的背景色 -->
    <!-- tree-props 配置树形子表
    row-click: 单击事件
    highlight-current-row:高亮选中某行
    default-expand-all：默认是否展开字列表
    current-change:管理选中时触发的事件
    selection-change：多选框
    row-key="id":    id：一定要跟后台返回来的id一致，不一致，会出错
    show-summary: 显示合计
    summary-method： 合计指定的某一列
    -->
<el-table
      ref="table"
      :data="tableData"
      :height="getHeight"
      :show-summary="showSum"
      :summary-method="getSummaries"
      border
      @selection-change="handleSelectionChange"
      :key="itemKey"
      :cell-style="tableCellStyle"
      @row-click="clickRow"
      row-key="ID"
      :default-expand-all="defaultall"
      :highlight-current-row="highlightCurrent"
      @current-change="handleCurrentChangeRow"
      :tree-props="{ children: 'Children' }"
    >

      <el-table-column
        type="index"
        width="55"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        type="selection"
        v-if="isSelection"
        width="55"
      >
      </el-table-column>
      <!-- item.direction 方向，判断居中还是靠右 -->
      <template v-for="(item, index) in tableHeader">
        <!-- 1. 这是第一层 -->
        <!-- sortable: 排序 -->
        <el-table-column
          v-if="!item.child"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          header-align="center"
          :align="item.direction"
          :min-width="item.width"
          :sortable="item.sortable"
        >
        </el-table-column>
        <!-- 二级表头 -->
        <el-table-column
          v-else
          :key="index+1"
          :prop="item.prop"
          :label="item.label"
          :type="item.type"
          :align="item.align || 'center'"
        >
        </el-table-column>
      </template>
      
    </el-table>

3. js :文章来源地址https://www.toymoban.com/news/detail-542636.html

// 合计 指定某一列添加合计

    getSummaries(param) {
      console.log(param, "heji11111");
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        } else if (column.property == "Amount") {
          //如果是经费（正常的加减法）
          const values = data.map((item) => Number(item[column.property]));
          console.log(values);
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              var sum = 0;
              if (!isNaN(value)) {
                sum = Number(Number(prev) + Number(curr)).toFixed(2);
                return sum;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += " ";
          }
        }
      });
      return sums;
    },