element table合计某一列的值

最新推荐文章于 2025-06-27 16:25:29 发布

暖一杯茶

最新推荐文章于 2025-06-27 16:25:29 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44932450/article/details/124490686

Vue 专栏收录该内容

30 篇文章

订阅专栏

该篇博客详细介绍了如何在Vue项目中利用Element UI的<el-table>组件实现表格数据的汇总功能。通过设置`summary-method`属性和`show-summary`属性，结合自定义的`getSummaries`方法，可以实现指定列的数值求和，为前端开发人员提供了便捷的数据展示方式。

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

在这里插入图片描述
table上加上:summary-method=“getSummaries” ，show-summary

<el-table
        :data="info.inventoryDetailList"
        style="width: 100%"
        :summary-method="getSummaries"
        show-summary
></table>
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 2 || index === 3) { //指定哪一列合计 如果需要全部合计 去掉这个判断即可
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              console.log();
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = "";
          }
        }
      });
      return sums;
    },