Vue3 el-table组件,使用:summary-method自定义合计方法
·
使用 show-summary属性, :summary-method="自定义方法"
<el-table v-loading="receiptLoading" :data="listInfo.Details" style="width: 100%" size="small" border show-summary :summary-method="getSummaries">
<el-table-column prop="Quantity" :label="数量" />
...
</el-table>
// 明细表格自定义合计方法
const getSummaries = ({ columns, data }) => {
const sums = [] as any[];
columns.forEach((column, index) => {
// 第一列显示"合计"
if (index === 0) {
sums[index] = '合计';
return;
}
let array=["Quantity"] //要求和的列
// 判断是否是目标列
if (array.includes(column.property)) {
// 计算该列总和
const values = data.map(item => new Decimal(item[column.property]));
sums[index] = values.reduce((prev, curr) => prev.plus(new Decimal(curr.toString())), new Decimal(0));
} else {
// 其他列显示空
sums[index] = '';
}
});
return sums;
};
更多推荐



所有评论(0)