el-table 合计
时间: 2023-10-10 22:15:24 浏览: 86
功能如何实现?
El-table 合计功能可以通过计算表格中某列数据的总和、平均数、最大值等实现。具体的实现方法是在 el-table 标签中添加 show-summary 属性,并在 el-table-column 标签中添加 prop 属性、summary-type 属性和 summary-method 属性来指定需要计算的列、汇总类型和计算方法。例如:
<el-table :data="tableData" show-summary>
<el-table-column prop="amount" label="金额" summary-type="sum" :summary-method="getSum" />
</el-table>
getSum 方法实现了求和功能:
methods: {
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
const values = data.map(item => 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);
} else {
sums[index] = '';
}
});
return sums;
}
}
以上方法会在底部显示表格中所有金额列的总和。
阅读全文