vue使用table实现动态数据报表(行合并)

<template><div class="previewTable"><h2>***项目研发数据报告</h2><table id="previewTable" width="100%"><tr><th>项目名称</th><td colspan="6">{{ resultData.proName }}</td><th>课程级别</th><td>{{resultData.leval }}</td></tr><tr><th>课题类别</th><td colspan="4"></td><th>目标方向</th><td></td><th>承担部门</th><td></td></tr><tr><th>项目负责人</th><td colspan="3"></td><th>项目成员</th><td colspan="5"></td></tr><tr><th>委托</th><th colspan="3">方案</th><th>样品</th><th colspan="2">检验项目</th><th colspan="2">方案小结</th></tr><tr v-for="(item) in resultData.list" :key="item.id"><td v-if="item.commissionRowSpan != 0" :rowspan="item.commissionRowSpan">{{item.commission}}</td><td v-if="item.schemeRowSpan != 0" :rowspan="item.schemeRowSpan">{{item.scheme}}</td><td v-if="item.schemeNameRowSpan != 0" :rowspan="item.schemeNameRowSpan">{{item.schemeName}}</td><td><span class="link-class" >数据链接</span> 			 </td><td v-if="item.schemeNameRowSpan != 0" :rowspan="item.schemeNameRowSpan">{{item.num}}</td><td>{{item.inspectionItems}}</td><td><span class="link-class" >数据链接</span> 			 </td><td>***小结(小结名称)</td><td><span class="link-class" >数据链接</span> 			 </td></tr></table></div>
</template>
<script>
export default{data(){return{resultData:{proName:"xxx项目名称",leval:'高级',zhengshus:"安全员C证、PMP",list:[{id:0,commission:"委托1",scheme:"委托1方案1",schemeName:"委托1方案1(方案名称)",num:"5",name:"李四",inspectionItems:"直读检测成分",zhengshus:"安全员A证、操作员B证"},{id:0,commission:"委托1",scheme:"委托1方案1",schemeName:"委托1方案1(方案名称)",num:"5",name:"李四",inspectionItems:"金相组织",zhengshus:"安全员A证、操作员B证"},{id:0,commission:"委托1",scheme:"委托1方案1",schemeName:"委托1方案1(方案名称)",num:"5",name:"李四",inspectionItems:"晶粒度评级",zhengshus:"安全员A证、操作员B证"},{id:0,commission:"委托1",scheme:"委托1方案1",schemeName:"委托1方案1(方案名称)",num:"5",name:"李四",inspectionItems:"硬度测量",zhengshus:"安全员A证、操作员B证"},{id:0,commission:"委托1",scheme:"委托1方案2",schemeName:"委托1方案2(方案名称)",num:"5",name:"李四",inspectionItems:"直读检测成分",zhengshus:"安全员A证、操作员B证"},{id:1,commission:"委托1",scheme:"委托1方案2",schemeName:"委托1方案2(方案名称)",num:"5",name:"李四",inspectionItems:"金相组织",zhengshus:"安全员A证、操作员B证"},{id:2,commission:"委托1",scheme:"委托1方案3",schemeName:"委托1方案3(方案名称)",num:"5",name:"王五",inspectionItems:"晶粒度评级",zhengshus:"安全员A证、操作员B证"},{id:3,commission:"委托2",scheme:"委托2方案1",schemeName:"委托2方案1(方案名称)",num:"5",name:"何佳慧",inspectionItems:"硬度测量",zhengshus:"安全员A证、操作员B证"},{id:4,commission:"委托2",scheme:"委托2方案2",schemeName:"委托2方案2(方案名称)",num:"5",name:"王五",inspectionItems:"常温冲击",zhengshus:"安全员A证、操作员B证"},{id:5,commission:"委托2",scheme:"委托2方案3",schemeName:"委托2方案3(方案名称)",num:"5",name:"何佳慧",inspectionItems:"金相组织",zhengshus:"安全员A证、操作员B证"},{id:6,commission:"委托3",scheme:"委托3方案1",schemeName:"委托3方案1(方案名称)",num:"5",name:"何佳慧",inspectionItems:"常温冲击",zhengshus:"安全员A证、操作员B证"}]}}},created() {this.combineRow(['commission','scheme','schemeName'])},methods:{//  合并单元格combineRow(cols) {console.log("resultData.value",this.resultData.list)const tableData = this.resultData.listcols.forEach((key) => {for (let i = 0; i < tableData.length; i++) {const item = tableData[i]let count = 1for (let j = i + 1; j < tableData.length; j++) {// 如果是同一个值,往后递增if (item[key] === tableData[j][key]) {count++// 往后相同的值都设为空单元格tableData[j][`${key}RowSpan`] = 0// 只有同值第一个才设置合并的单元格数item[`${key}RowSpan`] = count// 所有都是为同一个值的情况// 如果到了尾部,则循环结束if (j === tableData.length - 1) {return}} else {// 指针跳转到下一个,从下一排开始i = j - 1count = 1tableData[j][`${key}RowSpan`] = countbreak}}}})this.resultData.list = tableData}}
}</script><style lang="scss" scoped>.previewTable{padding:10px;background-color: #fff;color: #000000;line-height: 40px;h2{text-align: center;}.link-class{color: red;}// 给表格设置边框table,td,th {text-align: center;border: 1px solid #ccc;border-collapse: collapse;}table td {// padding: 10px 30px;}}  </style>

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

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

相关文章

【D3.js in Action 3 精译_030】3.5 给 D3 条形图加注图表标签(下):Krisztina Szűcs 人物专访 + 3.6 本章小结

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可…

一键将表格嵌入ppt作为附件!2个做ppt必知的技巧分享!

怎样把表格作为附件放入ppt&#xff1f; 众所周知&#xff0c;微软推出的Office套件包含了Powerpoint和Excel这两款软件&#xff0c;如果想在Powerpoint中插入表格&#xff0c;且表格数据量比较大&#xff0c;此时最好的呈现方式&#xff0c;是在Excel中来展示这些数据&#x…

使用Spring Security+jwt+redis实现登录注册逻辑

Spring Security Spring Security 是一个提供身份验证、授权和防御常见攻击的框架。它为保护命令式和响应式应用程序提供了一流的支持&#xff0c;是保护基于 Spring 的应用程序的事实标准。 这篇博客主要是记录自己第一次使用springSecurity实现登录逻辑的过程。 使用Spring…

【Unity学习笔记】解决疑似升级Win11或使用Unity6导致Unity旧版本无法打开的问题

【Unity学习笔记】解决疑似升级Win11或使用Unity6导致Unity旧版本无法打开的问题 一句话省流&#xff1a; 确保项目地址没有任何中文&#xff0c;重新申请个许可证&#xff0c;然后该咋就咋&#xff0c;完事。 ——————————————————————————————…

滚雪球学Redis[2.2讲]:列表(List)

全文目录&#xff1a; 前言列表类型的使用场景典型使用场景示例 常用命令1. LPUSH&#xff1a;在列表左侧插入元素2. RPUSH&#xff1a;在列表右侧插入元素3. LPOP&#xff1a;从列表左侧弹出元素4. RPOP&#xff1a;从列表右侧弹出元素5. LLEN&#xff1a;获取列表的长度6. LR…

华为云应用侧Android测试APP

05.华为云应用侧Android测试APP 本APP在填写或修改部分参数后能够完成token获取&#xff0c;影子消息读取&#xff0c;命令下发。APP共包含三个界面&#xff1a;主界面获取token、影子消息获取界面、命令下发界面。 实现过程参见&#xff1a;华为云应用侧Android Studio开发-…

SQLITE 构建多表查询

在SQLite中,构建多表查询时,最常用的方式是使用 JOIN 操作符来连接多个表。下面是一些常见的查询方式及其示例: INNER JOIN INNER JOIN 是最常见的联接方式,它返回在两个表中都匹配的记录。```sql sql 复制代码 SELECT 表1.列名, 表2.列名 FROM 表1 INNER JOIN 表2 ON 表1.…

企业如何制定适合自己的专利布局策略

在竞争激烈的市场环境中&#xff0c;专利布局对于企业的发展和竞争优势的建立至关重要。以下将分要点解析企业如何制定适合自己的专利布局策略。 1、明确企业的发展战略和市场定位 企业首先需要深入了解自身的长期发展规划和短期业务目标。明确是要通过技术创新来开拓新市场&am…

微服务之间的相互调用的几种常见实现方式对比

目录 微服务之间的相互调用的几种实现方式 一、HTTP HTTP/RESTful API调用工作原理 二、RPC 设计理念与实现方式 协议与传输层 RPC远程调用工作原理 应用场景与性能考量 特点 三、Feign 设计理念与实现方式 协议与传输层 Feign调用的基本流程 Feign调用的工作原理…

Electron + ts + vue3 + vite

正常搭建脚手架&#xff1a;npm create vitelatest 项目名称 安装electron的相关依赖&#xff1a;注&#xff1a;安装时终端url要项目名那一层 安装npm install electron -D安装打包工具&#xff1a;npm install electron-builder -D开发工具&#xff1a;npm install electron-…

前端_001_html扫盲

文章目录 概念标签及属性常用全局属性head里常用标签body里常用标签表情符号 url编码 概念 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body></bod…

python爬虫 - 深入requests模块

&#x1f308;个人主页&#xff1a;https://blog.csdn.net/2401_86688088?typeblog &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html 目录 前言 一、下载网络文件 &#xff08;一&#xff09;基本步骤 &#xff08;二&…

高级java每日一道面试题-2024年10月8日-数据库篇[Redis篇]-谈—谈缓存穿透、缓存击穿和缓存雪崩,以及解决办法?

如果有遗漏,评论区告诉我进行补充 面试官: 谈—谈缓存穿透、缓存击穿和缓存雪崩&#xff0c;以及解决办法? 我回答: 在分布式系统和高并发场景中&#xff0c;缓存是提高系统性能和响应速度的重要手段。然而&#xff0c;如果缓存使用不当&#xff0c;可能会遇到一些问题&…

Windows下MYSQL8.0如何恢复root权限

误操作把root权限清掉导致数据库无法登录&#xff08;确实很难受&#xff09;&#xff0c;在网上找了很多方法&#xff0c;发现没有很行之有效的方法&#xff0c;在多方尝试终于找到了适合敏感宝宝体质的方法。 C:\Users\Administrator>mysql -u root -P3307 ERROR 1045 (2…

数据结构——遍历二叉树

目录 什么是遍历二叉树 根据遍历序列确定二叉树 例题&#xff08;根据先序中序以及后序中序求二叉树&#xff09; 遍历的算法实现 先序遍历 中序遍历 后序遍历 遍历算法的分析 二叉树的层次遍历 二叉树遍历算法的应用 二叉树的建立 复制二叉树 计算二叉树深度 计算二…

Redis 高可用方案

Redis 高可用性&#xff08;High Availability&#xff09;是指在 Redis 系统中实现持续的可用性&#xff0c;即使在发生硬件故障或其他意外情况下&#xff0c;系统仍能保持运行。 1 常用方案 为了实现 Redis 的高可用性&#xff0c;以下是几种常用方案&#xff1a; 1.1 使用…

常见校验算法介绍

文章目录 一、奇偶校验二、 校验和三、 BCC&#xff08;Block Check Character&#xff0c;块校验字符&#xff09;校验四、CRC&#xff08;循环冗余校验&#xff09;五、海明码校验六、MD5&#xff08;消息摘要算法第五版&#xff09;和 SHA&#xff08;安全哈希算法&#xff…

1688商品评论接口技术深度解析与实战代码实现

引言 在电商领域&#xff0c;商品评论是消费者购物决策的重要依据。1688作为国内领先的B2B电商平台&#xff0c;提供了丰富的商品评论接口&#xff0c;供商家和开发者获取、管理并展示商品评论数据。本文将详细介绍如何调用1688商品评论接口&#xff0c;并提供Python实战代码示…

系统架构设计师教程 第16章 16.1 嵌入式系统概述 笔记

16.1 嵌入式系统概述 嵌入式系统 (Embedded System) 是为了特定应用专门构建的计算机系统&#xff0c;其架构是随着嵌入式系统的逐步应用而发展形成。 16.1.1 嵌入式系统发展历程 五个阶段&#xff1a; 一&#xff1a;单片微型计算机 (SCM) 阶段&#xff0c;即单片机时代。…

小猿口算自动PK脚本

大家好&#xff0c;我是小黄。 近期&#xff0c;众多大学生炸鱼小猿口算APP,把一众小学生都快虐哭了&#xff0c;小黄听闻后&#xff0c;也跃跃欲试。对此小黄也参考网上的资料写了一个自动Pk的脚步。 首先大家需要安装一个pytorch环境过程中&#xff0c;如果小伙伴对此不熟悉的…