When we use el-table, the document gives a relatively clear example, and the screenshot below is superficial
show-summary and summary-method are used together
getSummaries(param) {
const {
columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价';
return;
}
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += ' 元';
} else {
sums[index] = 'N/A';
}
});
return sums;
}
Basically, there is no need to change anything, just use it directly
Then it is not difficult to say that the end of the table of vxe-table is totaled, show-footer and footer-method are used together
<vxe-table
class="vxetable "
:data="tableData"
border
resizable
:footer-method="footerMethod"
:show-footer="true"
>
footerMethod({
columns, data }) {
const footerData = [
columns.map((column, _columnIndex) => {
if (_columnIndex === 0) {
return '合计'
}
if (['qty'].includes(column.field)) {
return this.sumNum(data, 'qty')
}
if (['sum'].includes(column.field)) {
return this.sumNum(data, 'sum')
}
return null
}),
]
return footerData
},
// 进行合计
sumNum(costForm, type) {
if (type == 'qty') {
let total = 0
for (let i = 0; i < costForm.length; i++) {
total += costForm[i].qty
}
return this.moneyFilter(total)
} else {
let total = 0
for (let i = 0; i < costForm.length; i++) {
total += costForm[i].sum
}
return this.moneyFilter(total)
}
},
moneyFilter (value) {
if (!value) return '0.00'
value = value - 0
return value.toFixed(2).replace(/(\d)(?=(\d{
3})+\.)/g, '$1,')
}