开发需求总结18-vue el-table合计功能, 前几列使用合计求和,最后一列的百分比数据,计算出平均百分比

news/2024/11/30 5:02:00/

需求:

在element UI的el-table组件中,可以通过show-summary属性和summary-method属性来实现合计功能。如果需要在合计行中显示特定列的百分比数据,可以在summary-method中自定义合计逻辑。

代码实现:

<template><el-table:data="tableData"show-summary:summary-method="getSummary"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="score"label="分数"></el-table-column><el-table-columnprop="percentage"label="百分比"></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{ date: '2016-05-02', name: '张三', score: 10, percentage: '50%' },{ date: '2016-05-04', name: '李四', score: 20, percentage: '60%' },// ...更多数据]};},methods: {getSummary(param) {const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if (index === columns.length - 1) {// 最后一列是百分比列,计算所有百分比的平均值const percentages = data.map(item => parseFloat(item.percentage.replace('%', '')) / 100);const average = percentages.reduce((total, num) => total + num, 0) / percentages.length;sums[index] = `${(average * 100).toFixed(2)}%`; // 保留两位小数} else {// 其他列使用求和方式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] = sums[index].toFixed(2)} else {sums[index] = 'N/A';}}});return sums;}}
};
</script>


http://www.ppmy.cn/news/1551108.html

相关文章

Excel如何设置超出单元格的内容不显示?

如图&#xff0c;在使用EXCEL时经常出现超出单元格显示的情况&#xff1a; 如果想要把超出单元格的部分隐藏&#xff0c;需要进行以下设置&#xff1a; 选中想要设置的单元格&#xff0c;然后点击对齐方式右边的按钮&#xff0c;对齐设置&#xff0c;选择“对齐”选项卡&#…

Hive构建日搜索引擎日志数据分析系统

1.数据预处理 根据自己或者学校系统预制的数据 使用less sogou.txt可查看 wc -l sogou.txt 能够查看总行数 2.数据扩展部分 我的数据位置存放在 /data/bigfiles 点击q退出 将一个文件的内容传递到另一个目录文件下 原数据在 /data/bigfiles ->传递 到/data/workspac…

为什么PHP爬虫抓取失败?解析cURL常见错误原因

豆瓣电影评分作为中国电影市场的重要参考指标&#xff0c;凭借其广泛覆盖的观众反馈和真实评分&#xff0c;成为电影市场推广和策略优化的核心依据之一。通过精准获取这些评分数据&#xff0c;电影制作方和发行方可以更好地理解观众需求&#xff0c;优化宣传策略&#xff0c;并…

Jenkins-基于 SSH 实现 Jenkins 分布式

工作原理 主节点与从节点通信&#xff1a; 主节点通过 SSH 登录到从节点&#xff0c;并启动 Jenkins Agent 程序&#xff08;Agent.jar&#xff09;Agent 程序通过主节点指定的端口&#xff08;默认为 50000&#xff09;与主节点保持通信 任务分发&#xff1a; 主节点根据任务配…

GaussianDreamer: Fast Generation from Text to 3D Gaussians——点云论文阅读(11)

此内容是论文总结&#xff0c;重点看思路&#xff01;&#xff01; 文章概述 本文提出了一种快速从文本生成3D资产的新方法&#xff0c;通过结合3D高斯点表示、3D扩散模型和2D扩散模型的优势&#xff0c;实现了高效生成。该方法利用3D扩散模型生成初始几何&#xff0c;通过噪声…

spring +fastjson 的 rce

前言 众所周知&#xff0c;spring 下是不可以上传 jsp 的木马来 rce 的&#xff0c;一般都是控制加载 class 或者 jar 包来 rce 的&#xff0c;我们的 fastjson 的高版本正好可以完成这些&#xff0c;这里来简单分析一手 环境搭建 <dependency><groupId>org.spr…

laravel中队列使用

Laravel 提供了强大的队列系统&#xff0c;允许开发者将耗时任务推送到后台执行&#xff0c;从而提升系统性能和用户体验。本文将从基本使用到深入解析&#xff0c;结合单进程队列的特点&#xff0c;完整地介绍 Laravel 队列的使用。 队列的作用和场景* 在 Web 开发中&#x…

C#里怎么样使用LINQ的let关键字实现查询?

C#里怎么样使用LINQ的let关键字实现查询? 在C#中,let关键字是用来在查询表达式中声明一个范围变量的。范围变量是在迭代过程中保存查询产生的序列中的元素的临时变量。 以下是一个使用let关键字的示例代码: /** C# Program to Implement Let Condition using LINQ*/ usi…