当前位置:   article > 正文

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

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
// 合计 指定某一列添加合计
 
    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;
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/686720
推荐阅读
相关标签
  

闽ICP备14008679号