表格底部如何多行合计
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;
}