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

在这里插入图片描述

<!--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>
// 合计 指定某一列添加合计
 
    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;
    },
  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 element-ui 的 el-table 组件合计一列可以通过以下步骤实现: 1. 给表格数据源添加一个合计字段,用来存储该列的总和。 2. 在 el-table-column 组件中使用 scoped-slot 自定义列的内容,将该列的每个单元格的值累加到合计字段中。 3. 在表格底部添加一个 el-table-footer 组件,显示合计字段的值。 下面是一个简单的示例代码: ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"> <template slot-scope="scope">{{ scope.row.age }}</template> </el-table-column> <el-table-column prop="score" label="分数"> <template slot-scope="scope"> {{ scope.row.score }} <!-- 将该列的每个单元格的值累加到合计字段中 --> <span hidden>{{ total += scope.row.score }}</span> </template> </el-table-column> <el-table-footer> <template slot="footer"> <!-- 显示合计字段的值 --> <el-table-column :label="'合计:' + total"></el-table-column> </template> </el-table-footer> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, score: 80 }, { name: '李四', age: 22, score: 90 }, { name: '王五', age: 21, score: 85 } ], total: 0 // 合计字段 }; } }; </script> ``` 在上面的示例代码中,我们使用了一个隐藏的 span 元素来实现将该列的每个单元格的值累加到合计字段中。同时,我们使用了 el-table-footer 组件来显示合计字段的值。 需要注意的是,如果表格中有分页的话,以上方法只能计算当前页的合计值。如果需要计算所有数据的合计值,需要在后台进行统计。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值