el-table合计指定某列不合计和合计不生效

项目场景:

提示:这里简述项目相关背景:

在这里插入图片描述


问题描述

提示:这里描述项目中遇到的问题:

例如:想要某列展示合计数值的

1、先在组件添加 :summary-method=“getSummaries” show-summary
使用summary-method并传入一个方法,返回一个数组,这个数组中的各项就会显示在合计行的各列中。

@Override
	<el-table :summary-method="getSummaries" show-summary :data="list" >

2、自定义的合计计算方法 summary-method 判断条件中加上下标就是要显示列的位置。

getSummaries (param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        console.log(columns);
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value)) && index == 4 || index == 6 || index == 7 || index == 8 || index == 9 || index == 13) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        } else {
          sums[index] = '';
        }
      });

      return sums;

    },

summary-method合计不生效:

el-table-column 中嵌套了input没有prop传参,只使用了scope.row中的值来进行绑定,导致合计计算不生效。
summary-method合计不生效

<el-table-column label="本次付金额"  width="130">
  <template slot="header"><span class="star">*</span>本次付金额</template>
  <template slot-scope="scope">
    <el-input @input="inputActualAmount($event,scope.row,scope.$index)" v-model="scope.row.thisPrice"
      size="small" />
    <div style="color:red" v-if="scope.row.showWring">支付金额过大!</div>
  </template>
</el-table-column>

解决方案:

提示:这里填写该问题的具体解决方案:
在 el-table-column label=“本次付金额” prop=“thisPrice” width=“130”> 中加入prop 值。

<el-table-column label="本次付金额" prop="thisPrice" width="130">
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用 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 组件来显示合计字段的值。 需要注意的是,如果表格中有分页的话,以上方法只能计算当前页的合计值。如果需要计算所有数据的合计值,需要在后台进行统计。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值