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

YouDage

已于 2022-05-10 17:31:17 修改

阅读量3.3k

点赞数 2

分类专栏： vue 文章标签： javascript vue.js 前端

于 2022-05-10 08:52:14 首次发布

本文链接：https://blog.youkuaiyun.com/YouDage/article/details/124667055

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

在Vue项目中，遇到el-table组件的summary-method合计功能不生效的问题，原因是el-table-column中嵌套的input没有prop属性。解决方法是在el-table-column标签中添加prop属性，将'本次付金额'列的prop设置为'thisPrice'，确保数据绑定正确，从而实现合计计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

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

在这里插入图片描述

问题描述

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

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

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">