vue3 elementplus table表格多行合计

表格底部如何多行合计

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 === 'USD');
  CNYObj.docmt_ttl_amt = countTotal(CNYArr, 'docmt_ttl_amt');
  CNYObj.paid_ttl_amt = countTotal(CNYArr, 'paid_ttl_amt');
  CNYObj.app_ttl_amt = countTotal(CNYArr, 'app_ttl_amt');
  CNYObj.acnt_lmt = countTotal(CNYArr, 'acnt_lmt');
  CNYObj.acnt_sm_lmt = countTotal(CNYArr, 'acnt_sm_lmt');
  CNYObj.num_lmt = countTotal(CNYArr, 'num_lmt');
  CNYObj.bank_lmt = countTotal(CNYArr, 'bank_lmt');
  CNYObj.notesr_lmt = countTotal(CNYArr, 'notesr_lmt');
  CNYObj.comm_notesp_lmt = countTotal(CNYArr, 'comm_notesp_lmt');
  CNYObj.bank_notesp_lmt = countTotal(CNYArr, 'bank_notesp_lmt');
  CNYObj.oth_pymt_term_lmt = countTotal(CNYArr, 'oth_pymt_term_lmt');

  USDObj.docmt_ttl_amt = countTotal(USDArr, 'docmt_ttl_amt');
  USDObj.paid_ttl_amt = countTotal(USDArr, 'paid_ttl_amt');
  USDObj.app_ttl_amt = countTotal(USDArr, 'app_ttl_amt');
  USDObj.acnt_lmt = countTotal(USDArr, 'acnt_lmt');
  USDObj.acnt_sm_lmt = countTotal(USDArr, 'acnt_sm_lmt');
  USDObj.num_lmt = countTotal(USDArr, 'num_lmt');
  USDObj.bank_lmt = countTotal(USDArr, 'bank_lmt');
  USDObj.notesr_lmt = countTotal(USDArr, 'notesr_lmt');
  USDObj.comm_notesp_lmt = countTotal(USDArr, 'comm_notesp_lmt');
  USDObj.bank_notesp_lmt = countTotal(USDArr, 'bank_notesp_lmt');
  USDObj.oth_pymt_term_lmt = countTotal(USDArr, 'oth_pymt_term_lmt');

  tit.push(CNYObj);
  tit.push(USDObj);
  titData.value = tit;

  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('div', { class: '' }, [
        h('div', '金额合计'),
        h('br', '')
      ]);
      return;
    }
    if (index === 1) {
      sums[index] = h('div', { class: '' }, [h('div', 'CNY'), h('div', 'USD')]);
      return;
    }
    if (index === 2) {
      sums[index] = h('div', { class: '' }, [
        h('div', toThousandFilter(countTotal(CNYArr, column.property))),
        h('div', toThousandFilter(countTotal(USDArr, column.property)))
      ]);
      return;
    }
    if (index === 3) {
      sums[index] = h('div', { class: '' }, [
        h('div', toThousandFilter(countTotal(CNYArr, column.property))),
        h('div', toThousandFilter(countTotal(USDArr, column.property)))
      ]);
      return;
    }
    if (index === 4) {
      sums[index] = h('div', { class: '' }, [
        h('div', toThousandFilter(countTotal(CNYArr, column.property))),
        h('div', toThousandFilter(countTotal(USDArr, column.property)))
      ]);
      return;
    }
    if (index === 5) {
      sums[index] = h('div', { class: '' }, [
        h('div', toThousandFilter(countTotal(CNYArr, column.property))),
        h('div', toThousandFilter(countTotal(USDArr, column.property)))
      ]);
      return;
    }
    if (index === 6) {
      sums[index] = h('div', { class: '' }, [
        h('div', toThousandFilter(countTotal(CNYArr, column.property))),
        h('div', toThousandFilter(countTotal(USDArr, column.property)))
      ]);
      return;
    }
    if (index === 7) {
      sums[index] = h('div', { class: '' }, [
        h('div', toThousandFilter(countTotal(CNYArr, column.property))),
        h('div', toThousandFilter(countTotal(USDArr, column.property)))
      ]);
      return;
    }
    if (index === 8) {
      sums[index] = h('div', { class: '' }, [
        h('div', toThousandFilter(countTotal(CNYArr, column.property))),
        h('div', toThousandFilter(countTotal(USDArr, column.property)))
      ]);
      return;
    }
    if (index === 9) {
      sums[index] = h('div', { class: '' }, [
        h('div', toThousandFilter(countTotal(CNYArr, column.property))),
        h('div', toThousandFilter(countTotal(USDArr, column.property)))
      ]);
      return;
    }
    if (index === 10) {
      sums[index] = h('div', { class: '' }, [
        h('div', toThousandFilter(countTotal(CNYArr, column.property))),
        h('div', toThousandFilter(countTotal(USDArr, column.property)))
      ]);
      return;
    }
    if (index === 11) {
      sums[index] = h('div', { class: '' }, [
        h('div', toThousandFilter(countTotal(CNYArr, column.property))),
        h('div', toThousandFilter(countTotal(USDArr, column.property)))
      ]);
      return;
    }
    if (index === 12) {
      sums[index] = h('div', { class: '' }, [
        h('div', toThousandFilter(countTotal(CNYArr, column.property))),
        h('div', toThousandFilter(countTotal(USDArr, column.property)))
      ]);
      return;
    }
  });
  return sums;
}