vue3 elementplus table表格多行合计

关注

VIP免费原创最新推荐文章于 2026-04-01 03:29:16 发布 2.9k 阅读 AI 写同款· GEO 优化 ›

Element Plus Table 组件扩展：表尾合计功能详解本文介绍了如何使用Element Plus在Vue项目中实现表格行汇总功能。首先通过安装和引入Element Plus组件库完成基础准备工作，然后演示了如何利用el-table的show-summary属性快速实现基础表尾合计功能。针对更复杂的业务需求，文章详细讲解了如何通过summary-method自定义合计计算方法，包括处理不同类型数据、添加货币符号等进阶操作。文中提供了完整的代码示例和效果图示，帮助开发者快速掌握表格数据统计功能的实现方法。阅读详情

表格底部如何多行合计
在这里插入图片描述

1.先在标签上定义合计方法

 <el-table
            :data="data"
            :summary-method="getSummaries"
            :show-summary="true"
            @selection-change="handleSelectionChange"
          >

2.文件头部引入h函数渲染多行div，BigNumber 防止精度丢失。

import { reactive, onMounted, toRefs, ref, h } from 'vue';
import BigNumber from 'bignumber.js';

// 计算求和
function countTotal(arr, keyName) {
  let $total = 0;
  $total = arr.reduce(function (total, currentValue, currentIndex, arr) {
    return currentValue[keyName]
      ? new BigNumber(total).plus(currentValue[keyName]).toString()
      : total;
  }, 0);
  return $total;
}

function getSummaries(param: any) {
  const { columns, data } = param;
  const sums: string[] = [];
  const tit: string[] = [];

  let C