vue3 elementplus table表格多行合计

你眼中的柔情

于 2023-06-29 16:16:52 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端 vue3 elementplus

本文链接：https://blog.youkuaiyun.com/return_js/article/details/131458681

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

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

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

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 CNYObj = {
    waers: 'CNY'
  };
  let USDObj = {
    waers: 'USD'
  };
  const CNYArr = data.filter(item => item.waers === 'CNY');
  const USDArr = data.filter(item => item.waers

最低0.47元/天解锁文章