vue3 elementplus table表格多行合计

最新推荐文章于 2025-10-06 09:02:34 发布

原创

最新推荐文章于 2025-10-06 09:02:34 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #vue3 #elementplus

本文介绍了如何在Vue3中使用ElementPlus组件库实现表格的多行合计功能。通过在表格标签上定义合计方法，并在文件头部引入h函数来渲染多行div，同时利用BigNumber处理精度问题。

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

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

最低0.47元/天解锁文章