element ui table表格计算最后一列的合计数demo效果(整理)
2023-09-14 09:04:05 时间
table的合计功能
需求:计算表格中最后一列的总和,其他数字列不进行计算。
官网中的示例是所有数字列都进行计算总和的。所以需要自己处理。
参考官网知识点:
summary-method 自定义的合计计算方法 Function({ columns, data })
实现代码如下:
给table添加:summary-method=“getSummaries”
<el-table ref="table" size="small" :data="shopList" fit show-summary :summary-method="getSummaries">
<el-table-column label="项目" align="center" prop="proName"></el-table-column>
<el-table-column label="单笔(元)" align="center" prop="perMoney"></el-table-column>
<el-table-column label="数量" align="center" prop="num"></el-table-column>
<el-table-column label="合计(元)" align="center" prop="total"></el-table-column>
</el-table>
对应的函数如下:
getSummaries(param) {
//此处打印param可以看到有两项,一项是columns,一项是data,最后一列可以通过columns.length获取到。
const { columns, data } = param
const len = columns.length
const sums = []
columns.forEach((column, index) => {
//如果是第一列,则最后一行展示为“总计”两个字
if (index === 0) {
sums[index] = '总计'
//如果是最后一列,索引为列数-1,则显示计算总和
} else if (index === len - 1) {
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)
} else {
sums[index] = 'N/A'
}
//如果是除了第一列和最后一列的其他列,则显示为空
} else {
sums[index] = ''
}
})
return sums
}
相关文章
- Byzer + OpenMLDB 实现端到端的,基于实时特征计算的机器学习流程
- 芯动科技高性能计算“三件套”IP解决方案行业领先,满足新一代SoC带宽需求
- 利用wbs如何计算项目工期 ?
- 三大运营商大举进军,国内云计算行业正迎来巨变
- 曹建农院士:未来边缘计算:趋于分布式智能
- 【计算理论】可判定性 ( 对角线方法 | 使用对角线方法证明 通用任务图灵机 语言 不可判定 )
- 【C 语言】数组 ( 指针退化验证 | 计算数组大小 | #define LENGTH(array) (sizeof(array) / sizeof(*array)) )
- Java时间计算和比较详解编程语言
- Oracle日期计算:精准识别时间的函数(oracle日期计算函数)
- Linux:开启另一种计算和运维之旅(linux的分支)
- 2016 CCF 大数据与计算智能大赛完美落幕,11 支技术团队脱颖而出
- Oracle数据库如何计算数据的百分比?(oracle百分比)
- 使用Oracle的函数计算生日日期(oracle计算生日)
- Oracle智能计算农历阴历(oracle农历阴历)
- oracle中计算前一周的日期(oracle中日期前一周)
- php计算十二星座的函数代码