【表格插入小计行】el-table表格,数组对象中根据某字段插入小计行计算数据

news2025/2/22 20:52:08

前言

功能解释:遇到的一个需求,是表格的tabledata数组。里面有科室医生还有很多消费指标等数据。然后需要我排序后把科室放在一起。然后在每个科室下面添加一行数据,是小计行。用于计算上面相同科室的所有数据汇总。然后最下面再来个合计行,加上所有的小计。

效果图

刚排序后是这样的表格样子,数据是我模拟的
在这里插入图片描述
然后插入小计行后是这样的。
在这里插入图片描述

实现方法

逻辑流程:
1,请求拿到表格的数据tableData
2,把数组排序,让科室都在一起,然后合并单元格
3,循环数组,找出对应科室的角标保存到一个数组中,并用科室命名。
4,反转数组,从后面往前面插入,因为从前面开始插入会导致角标变化
5,计算好小计行直接插入就完事了。

代码

可以直接复制查看效果,改改字段就可以用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 公共css文件 -->
    <script src="./ceshi.js"></script>
    <link rel="stylesheet" href="/statics/css/common/common.css">
    <!-- 公共js文件 -->
    <script type="text/javascript" src="/statics/vue_element/common.js"></script>
    <!-- vue方面文件 -->
    <script src="/statics/vue_element/vue.js"></script>
    <script src="/statics/vue_element/element.js"></script>
    <link rel="stylesheet" href="/statics/vue_element/element.css">
    <script src="/statics/vue_element/axios.js"></script>
    <script src="/mixins/quanxian.js"></script>
    <title>测试页</title>
</head>

<body>
    <div id="app" style="padding:10px;">
        <el-table :data="tableDatas" border style="width: 100%" ref="configurationTable" :row-style="rowstyle"
            :span-method="objectSpanMethod">
            <el-table-column v-for="(arrd,index) in headers" :key="index" :label="arrd.name" align="center" width='100'
                show-overflow-tooltip>
                <!-- 有子级 -->
                <el-table-column v-for="(arrd2,index2) in arrd.child" align="center" :label="arrd2.name"
                    show-overflow-tooltip>
                    <template slot-scope="{row, $index}">
                        <span>{{row[arrd2.key]}}</span>
                    </template>
                </el-table-column>
                <!-- 无子级 -->
                <template slot-scope="{row, $index}">
                    <span>{{row[arrd.key]}}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</body>
<script type="text/javascript">
    let v = new Vue({
        el: '#app',
        data() {
            return {
                tableDatas: [],//表体
                headers: [],//表头
                spanArr: []//合并单元格
            }
        },
        mounted() {
            this.searchList()
        },
        methods: {
            // 模拟发送请求,拿到表格数据
            searchList() {
                let that = this
                that.tableShow = false
                // 模拟数据
                that.headers = [{
                            child: [],
                            key: "ks",
                            name: "科室"
                        },
                        {
                            child: [],
                            key: "doctor",
                            name: "医生"
                        },
                        {
                            child: [],
                            key: "ghl",
                            name: "挂号"
                        },
                        {
                            child: [],
                            key: "jzl",
                            name: "就诊"
                        },
                        {
                            child: [],
                            key: "jz",
                            name: "体检"
                        }
                    ],
                    that.tableDatas = [{
                        ks: "中医科",
                        doctor: '中医科医生1',
                        ghl: 6,
                        jzl: 5,
                        jz: 2,
                    }, {
                        ks: "中医科",
                        doctor: '中医科医生2',
                        ghl: 9,
                        jzl: 4,
                        jz: 3,
                    }, {
                        ks: "外科",
                        doctor: '外科医生2',
                        ghl: 7,
                        jzl: 3,
                        jz: 4,
                    }, {
                        ks: "外科",
                        doctor: '外科医生1',
                        ghl: 5,
                        jzl: 1,
                        jz: 5,
                    }, {
                        ks: "内科",
                        doctor: '内科医生3',
                        ghl: 2,
                        jzl: 1,
                        jz: 6,
                    }, {
                        ks: "内科",
                        doctor: '内科医生1',
                        ghl: 2,
                        jzl: 12,
                        jz: 7,
                    }]
                this.tableDatas.sort(this.mysort);
                this.groupHandle(that.tableDatas)
                let hj = this.hj(that.tableDatas)
                this.tableDatas.push(hj)
                this.setdates()
            },
            // 根据科室排序
            mysort(a, b) {
                if (a.ks !== b.ks) {
                    if (a.ks !== null && a.ks !== undefined) {
                        return a.ks < b.ks ? -1 : 1;
                    } else {
                        return -1;
                    }
                }
            },
            // 计算小计行插入位置
            groupHandle(Human) {
                let doctorMap = {};
                for (let i = 0; i < Human.length; i++) {
                    //找出相同名称的行数
                    let doctorName = Human[i].ks
                    if (doctorMap[doctorName] !== undefined) {
                        doctorMap[doctorName].push(i);
                    } else {
                        doctorMap[doctorName] = [i];
                    }
                }
                let keyArr = [];
                for (let k in doctorMap) {
                    //取出key并倒序,防止正序插入会影响行下标
                    keyArr.unshift(k);
                }
                keyArr.forEach((ele, index) => {
                    let lastIndex = doctorMap[ele][doctorMap[ele].length - 1]; //找出相同名称最后一行插入合计数据
                    let obj = this.xj(Human, ele) //计算出小计行数据
                    Human.splice(lastIndex + 1, 0, obj) //插入
                })
            },
            // 小计行计算
            xj(data, name) {
                let obj = {
                    ks: name, //科室名字,用于合并单元格
                    doctor: '小计',
                    ghl: 0,
                    jzl: 0,
                    jz: 0,
                }
                data.forEach(item => {
                    // 科室相同的加起来
                    if (item.ks == name) {
                        obj.ghl += (item.ghl ? parseFloat(item.ghl) : 0)
                        obj.jzl += (item.jzl ? parseFloat(item.jzl) : 0)
                        obj.jz += (item.jz ? parseFloat(item.jz) : 0)
                    }
                })
                return obj
            },
            // 合计行计算
            hj(data) {
                let hj = {
                    ks: '合计',
                    doctor: '-',
                    ghl: 0,
                    jzl: 0,
                    jz: 0,
                }
                data.forEach(item => {
                    // 小计行加起来就是合计
                    if (item.doctor == '小计') {
                        hj.ghl += (item.ghl ? parseFloat(item.ghl) : 0)
                        hj.jzl += (item.jzl ? parseFloat(item.jzl) : 0)
                        hj.jz += (item.jz ? parseFloat(item.jz) : 0)
                    }
                })
                return hj
            },
            // 行底纹
            rowstyle({
                row,
                rowindex,
            }) {
                if (row.ks == '合计') {
                    return "background:#afdfe4;color:#34738f"
                }
                if (row.doctor == '小计') {

                    return "background:	#D9EDF7;color:#34738f;border-bottom:1px solid #409eff !important;"
                }
            },
            // 合并单元格
            objectSpanMethod({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                if (columnIndex === 0) {
                    const _row = this.spanArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    };
                }
            },
            // 计算要合并的单元格
            setdates() {
                let contactDot = 0;
                this.spanArr = []
                this.tableDatas.forEach((item, index) => {
                    item.index = index;
                    if (index === 0) {
                        this.spanArr.push(1);
                    } else {
                        // 根据相同科室来合并
                        if (item.ks === this.tableDatas[index - 1].ks) {
                            this.spanArr[contactDot] += 1;
                            this.spanArr.push(0);
                        } else {
                            contactDot = index;
                            this.spanArr.push(1);
                        }
                    }
                });
            },
        }
    })
</script>
<style scoped>

</style>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1028060.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【深度学习实验】前馈神经网络(四):自定义逻辑回归模型:前向传播、反向传播算法

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入必要的工具包 1. 逻辑回归Logistic类 a. 构造函数__init__ b. __call__(self, x)方法 c. 前向传播forward d. 反向传播backward 2. 模型训练 3. 代码整合 一、实验介绍 实现逻…

JavaWeb 学习笔记 5:JSP

JavaWeb 学习笔记 5&#xff1a;JSP 简单的说&#xff0c;JSP 就是 Java Html&#xff0c;JSP 的出现是为了让 Java Web 应用生成动态页面更容易。 1.快速开始 1.1.依赖 添加 JSP 依赖&#xff1a; <dependency><groupId>javax.servlet.jsp</groupId>&…

华为云云耀云服务器L实例评测|使用docker部署禅道系统

大家好&#xff0c;我是早九晚十二&#xff0c;目前是做运维相关的工作。写博客是为了积累&#xff0c;希望大家一起进步&#xff01; 我的主页&#xff1a;早九晚十二 文章目录 前言准备工作华为云账号注册充值、购买服务器 服务器操作密码修改登录远程工具 禅道部署简介 部署…

【校招VIP】java语言考点之序列化

考点介绍&#xff1a; 将java对象转换为字节序列的过程称为对象的序列化。对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬盘上&#xff0c;通常存放在一个文件中。 2) 在网络上传送对象的字节序列。 java语言考点之序列化-相关题目及解析内容可点击文章末尾链…

PyCharm:No Python interpreter configured for the project

一、问题概述 Your 的 Pycharm 软件创建完项目后&#xff0c;结果无法运行&#xff0c;观察后&#xff0c;在Pycharm代码编辑区上面出现了这样的一个黄色条提示&#xff1a;No Python interpreter configured for the project 【问题】在您的Python项目中无Python解释器…

金融业需要的大模型,是一个系统化工程

今年年初&#xff0c;在AIGC刚刚开始爆火的时候&#xff0c;我们曾经采访过一位AI领域的专家。当我们提问哪个行业将率先落地大模型时&#xff0c;他毫不犹豫地说道&#xff1a;“金融。” 金融行业场景多、数据多、知识多&#xff0c;这样的“三多”特点让其成为AI大模型发挥价…

yarn安装依赖时报错 error An unexpected error occurred:

一切起因是因为前一天安装了volta管理node&#xff0c;第二天启动项目&#xff0c; 显示error An unexpected error occurred: “https://registry.npmmirror.com/webpack-aliyun-oss/-/webpack-aliyun-oss-0.2.6.tgz: Request failed “404 Not Found””. 项目启动时发现报错…

Selenium Grid 的搭建方法

传统 Selenium Grid 的搭建方法 搭建一个具有 1 个 Node 的 Selenium Grid。那么通常来讲我们需要 2 台机器&#xff0c;其中一台作为 Hub&#xff0c;另外一台作为 Node&#xff0c;并要求这两台机器已经具备了 Java 执行环境。 1.通过官网下载 selenium-server-standalone-…

Java 21 发布,新功能助力开发更高效

Java 21 是 Java SE 平台的最新长期支持 (LTS) 版本&#xff0c;于 2023 年 9 月 19 日发布。它包括了一系列新功能和改进&#xff0c;可以让开发人员编写更高效、更可靠、更安全的 Java 应用程序。 新功能亮点 Java 21 的新功能包括&#xff1a; 虚拟线程&#xff1a;虚拟线程…

【 Tkinter界面-练习05】 event和bind

一、说明 事件和动作有关&#xff1b;所有的界面都与运动有关&#xff0c;本篇将对事件、事件触发、绑定回调函数等&#xff0c;其实是一系列部件配合的复杂的过程&#xff0c;这些过程牵扯到系统如何设计&#xff0c;线程、消息队列循环等。本篇将详细介绍各种因素的关系。 二…

BCC源码编译和安装

接前一篇文章&#xff1a;BCC源码下载 1. 进入源码根目录 进入到BCC源码根目录。命令及结果如下&#xff1a; $ cd bcc ~/eBPF/BCC/bcc$ ls cmake CONTRIBUTING-SCRIPTS.md docs images libbpf-tools man scripts src CMakeLists.txt …

Matlab论文插图绘制模板第115期—带Latex公式的图

之前的文章中&#xff0c;分享了Matlab带线标记的图&#xff1a; 带阴影标记的图&#xff1a; 带箭头标记的图&#xff1a; 带图形标记的图&#xff1a; 进一步&#xff0c;分享一下带Latex公式的图&#xff0c;先来看一下成品效果&#xff1a; 特别提示&#xff1a;本期内容『…

http1和http2的主要区别

主要有四个方面&#xff1a; 二进制分帧多路复用服务器主动推送头部压缩 将前两点结合来说&#xff0c;首先 二进制分帧 帧&#xff1a;HTTP/2 数据通信的最小单位&#xff1b; 消息&#xff1a;HTTP/2 中&#xff0c;例如在请求和响应等操作中&#xff0c;消息由一个或多个…

赛宁党支部赴延安开展革命旧址学习主题党日活动

为深入学习贯彻新时代中国特色社会主义思想和中共二十大精神&#xff0c;不断提升党支部成员综合素质和业务能力&#xff0c;2023年9月&#xff0c;赛宁公司党支部组织北京、南京、广州等三地部分党员及入党积极分子开展了“革命旧址学习”主题党日活动&#xff0c;深入寻访延安…

TongWeb8下应用忙碌线程监控

问题 &#xff1a; 在系统运行过程中发现TongWeb进程占用CPU过高&#xff0c;需要分析是应用哪里引起的问题。 分析过程(仅限Linux环境)&#xff1a; 1. 通过top命令查看TongWeb的java进程占用的CPU情况。 查看误区&#xff1a;不要以为java进程CPU占到398%就是高&#xff0…

Java基于微信小程序的青少年健康心理科普平台

第一章 简介 青少年心理健康科普平台为用户提供心理医生咨询服务&#xff0c;系统包括微信小程序端和后台。 微信小程序用户可以先进行注册&#xff0c;填写个人的基本信息提交到服务器&#xff0c;服务器把数据保存到数据库。管理员对青少年的信息进行验证后&#xff0c;青少…

面试官:Javscript数组的常用方法有哪些?

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 一、操作方法 增 push() unshift() splice concat() 删 pop() shift() splice() slice() 改 splice() …

uview组件库的安装

更多的请查看官方文档uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com) // 如果您的根目录没有package.json文件的话&#xff0c;请先执行如下命令&#xff1a; // npm init -y 安装 npm install uview-ui2.0.36 // 更新 // npm update uvie…

生产数据追溯产线管理看板助力企业实现产品质量追踪

在现代制造业中&#xff0c;企业对于产品质量的追踪和管理变得越来越重要。产品质量的好坏直接关系到企业的声誉和客户满意度。然而&#xff0c;传统的生产管理方式往往无法提供足够的数据和信息来进行全面的质量追踪。生产看板管理系统的出现为企业解决了这一难题。通过实时的…

大模型LLM深入浅出、主打通俗易懂

AI(人工智能)是通过机器来模拟人类认识能力的一种科技能力。AI最核心的能力就是根据给定的输入做出判断或预测。对数据进行分析&#xff0c;从而总结得到研究对象的内在规律。一般通过使用适当的统计、机器学习、深度学习等方法&#xff0c;对收集的大量数据进行计算、分析、汇…