el根据需求合并列

news/2024/4/19 14:46:07/文章来源:https://blog.csdn.net/qq_32230309/article/details/136585795

将 列分为 3 3 1 的格式

以下是vue代码:

<el-table:data="dataSource":border="true":header-cell-style="{ 'font-weight': 'normal', 'text-align': 'center' }":cell-style="{ 'text-align': 'center' }"size="mini"style="width: 100%":span-method="arraySpanMethod"><el-table-column prop="product_name" label="名称1"></el-table-column><el-table-column prop="cap_name" label="名称2"></el-table-column><el-table-column prop="name" label="名称3"></el-table-column><el-table-column prop="name1" label="名称4"></el-table-column><el-table-column prop="name2" label="名称5"></el-table-column></el-table>

data:

//注释:示例是用参数-product_name进行处理-该例好像只有数据是连续aaaa  或  bbbb才可以(第一条是a第二条是a第三条是b---不能第二条是b,第三条是a)dataSource: [{product_name: "aaaa",cap_name: "aa1",name: 2,name1: 1,name2: 0,},{product_name: "aaaa",cap_name: "aa2",name: 1,name1: 1,name2: 1,},,{product_name: "aaaa",cap_name: "aa3",name: 1,name1: 1,name2: 1,},{product_name: "bbbb",cap_name: "bb1",name: 1,name1: 1,name2: 0,},{product_name: "bbbb",cap_name: "bb2",name: 0,name1: 1,name2: 1,},{product_name: "bbbb",cap_name: "bb3",name: 0,name1: 1,name2: 1,},{product_name: "ccccc",cap_name: "cc2",name: 0,name1: 1,name2: 1,},{product_name: "ddddd",cap_name: "dd3",name: 0,name1: 1,name2: 1,},],

methods:

arraySpanMethod({ row, rowIndex, columnIndex }) {// // 合并行  产品名字相同合并if (columnIndex === 0) {if (rowIndex === 0 ||row.product_name != this.dataSource[rowIndex - 1].product_name) {let rowspan = 0;this.dataSource.forEach((element) => {if (element.product_name === row.product_name) {rowspan++;}});return [rowspan, 1];} else {return [0, 0];}}// 合并列 名称值都为1 的合并if (columnIndex > 2) {let colspan = 0;let colkeys = Object.keys(row);let currentindex = columnIndex - 1;if (row[colkeys[currentindex]] === 1) {if (row[colkeys[currentindex - 1]] != row[colkeys[currentindex]]) {for (let i = currentindex; i < colkeys.length; i++) {if (row[colkeys[i]] === 1) {colspan++;} else {break;}}return [1, colspan];} else {return [0, 0];}}}},

在这里插入图片描述
列合并只需 把行合并注释掉即可,如果想第二列合并那就把columnIndex === 0换成1 即可。

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

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

相关文章

git分布式管理-头歌实验搭建Git服务器

一、Git服务器搭建 任务描述 虽然有提供托管代码服务的公共平台&#xff0c;但是对一部分开发团队来说&#xff0c;为了不泄露项目源代码、节省费用及为项目提供更好的安全保护&#xff0c;往往需要搭建私有Git服务器用做远程仓库。Git服务器为团队的开发者们&#xff0c;提供了…

智能驾驶规划控制理论学习08-自动驾驶控制模块(轨迹跟踪)

目录 一、基于几何的轨迹跟踪方法 1、基本思想 2、纯追踪 3、Stanly Method 二、PID控制器 三、LQR&#xff08;Linear Quadratic Regulator&#xff09; 1、基本思想 2、LQR解法 3、案例学习 基于LQR的路径跟踪 基于LQR的速度跟踪 4、MPC&#xff08;Mode…

2024AI在医疗领域中的辅助趋势与现有进展

2024 年 AI 辅助研发趋势随着人工智能技术的持续发展与突破&#xff0c;2024年AI辅助研发正成为科技界和工业界瞩目的焦点。从医药研发到汽车设计&#xff0c;从软件开发到材料科学&#xff0c;AI正逐渐渗透到研发的各个环节&#xff0c;变革着传统的研发模式。在这一背景下&am…

计算机设计大赛 深度学习验证码识别 - 机器视觉 python opencv

文章目录 0 前言1 项目简介2 验证码识别步骤2.1 灰度处理&二值化2.2 去除边框2.3 图像降噪2.4 字符切割2.5 识别 3 基于tensorflow的验证码识别3.1 数据集3.2 基于tf的神经网络训练代码 4 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x…

基于PHP的景点数据分析系统设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 关键理论与技术 3 1.1 框架技术 3 1.1.1 QueryList 3 1.1.2 ThinkPHP 3 1.1.3 Amaze UI 3 1.2 数据可视化技术 4 1.3 数据库技术 4 1.4 本章小结 4 2 需求分析 5 2.1 业务流程分析 5 2.2 功能需求分析 5 2.3 用例分析 7 2.4 非功能性需求…

短剧APP系统开发,2024年最具潜力的赛道

短剧从去年开始就呈现暴风式上涨&#xff0c;占据了大众的空闲时间&#xff0c;刷到短剧的观众几乎都会沉迷进去&#xff0c;让人欲罢不能。今年春节一部《我在八零年代当后妈》的短剧就突破了日充值达2000万的惊人数据&#xff0c;更加刺激了短剧制作商&#xff0c;短剧市场的…

第三篇【传奇开心果系列】Python的自动化办公库技术点案例示例:深度解读Pandas股票市场数据分析

传奇开心果博文系列 系列博文目录Python的自动化办公库技术点案例示例系列 博文目录前言一、Pandas进行股票市场数据分析常见步骤和示例代码1. 加载数据2. 数据清洗和准备3. 分析股票价格和交易量4. 财务数据分析 二、扩展思路介绍1. 技术指标分析2. 波动性分析3. 相关性分析4.…

线上问题——学习记录幂等判断失效问题分析

一、业务流程 上图是对save和saveScore两个接口的流程抽象&#xff0c;save是上传答题数据&#xff0c;saveScore则是上传答题分数&#xff0c;为保证幂等和防止并发调用&#xff0c;这两个接口都加了分布式锁&#xff08;还是两层哦&#xff09;。第一层使用的是不同的锁&…

设计模式大题做题记录

设计模式大题 09年 上半年&#xff1a; 09年下半年 10年上半年 10年下半年 11年上半年 11年下半年 12年上半年 12年下半年 13年上半年 13年下半年

【DP】蓝桥杯第十三届-费用报销

#include<iostream> #include<algorithm> #include<cstring> #include<set> #include<queue> using namespace std; const int N1010; int dp[N][5010];//dp[i][j]:选到第i个物品是否能取到价值j&#xff1b; int month[13]{0,31,28,31,30,31,30…

python+requests+pytest+allure自动化测试框架

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、核心库 requests request请求 openpyxl excel文件操作 log…

如何使用 ArcGIS Pro 制作三维地形图

伴随硬件性能的提高和软件算法的优化&#xff0c;三维地图的应用场景会越来越多&#xff0c;这里为大家介绍一下在ArcGIS Pro怎么制作三维地形图&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的数据是从水经微图中下载的DEM和影像数据&#xff0c;除了DEM和影像数据…

【鸿蒙 HarmonyOS 4.0】常用组件:List/Grid/Tabs

一、背景 列表页面&#xff1a;List组件和Grid组件&#xff1b; 页签切换&#xff1a;Tabs组件&#xff1b; 二、列表页面 在我们常用的手机应用中&#xff0c;经常会见到一些数据列表&#xff0c;如设置页面、通讯录、商品列表等。下图中两个页面都包含列表&#xff0c;“…

分库与分表--一起学习吧之架构

分库与分表是数据库架构中用于解决单一数据库或表性能瓶颈问题的两种重要手段。随着数据量的不断膨胀&#xff0c;传统的单一数据库或表可能无法满足应用的需求&#xff0c;这时就需要考虑采用分库或分表的方式来提升性能。 一、定义 分库&#xff1a;是将原本数据量大的数据…

基于H5的旅游攻略平台设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 系统开发相关技术 3 1.1框架技术 3 1.1.1 SSM框架 3 1.1.2 SpringBoot框架 3 1.1.3 Spring框架 3 1.2开发语言 3 1.2.1 HTML 3 1.2.2 JAVA 4 1.2.3 JavaScript 4 1.3数据库 4 1.4本章小结 4 2 系统分析 5 2.1 可行性分析 5 2.2 功能需求分…

开展“3·15”金融消费者权益保护教育宣传活动怎样联系媒体投稿?

在组织“315”金融消费者权益保护教育宣传活动时,传统的方式通常是银行、金融机构或其他主办单位主动联系各类媒体,包括但不限于电视台、广播电台、报纸、杂志、新闻网站、金融专业媒体、社交媒体平台等,通过邮件、电话、传真等方式提供活动新闻稿、宣传材料、现场照片等素材,请…

JavaScript实现记住用户名功能

问题描述&#xff1a;通过JavaScript实现点击复选框将用户名存储到本地中&#xff0c;再次打开页面&#xff0c;输入框中自动输入上次保存的数据。 <body><label for"">用户名</label> <input type"text1" name"" id"…

【深度学习笔记】6_6 通过时间反向传播(back-propagation through time)

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 6.6 通过时间反向传播 在前面两节中&#xff0c;如果不裁剪梯度&#xff0c;模型将无法正常训练。为了深刻理解这一现象&#xff0c;本…

第19章-IPv6基础

1. IPv4的缺陷 2. IPv6的优势 3. 地址格式 3.1 格式 3.2 长度 4. 地址书写压缩 4.1 段内前导0压缩 4.2 全0段压缩 4.3 例子1 4.4 例子 5. 网段划分 5.1 前缀 5.2 接口标识符 5.3 前缀长度 5.4 地址规模分类 6. 地址分类 6.1 单播地址 6.2 组播地址 6.3 任播地址 6.4 例子 …

离线数仓(五) [ 从数据仓库概述到建模 ]

前言 今天开始正式数据仓库的内容了, 前面我们把生产数据 , 数据上传到 HDFS , Kafka 的通道都已经搭建完毕了, 数据也就正式进入数据仓库了, 解下来的数仓建模是重中之重 , 是将来吃饭的家伙 ! 以及 Hive SQL 必须熟练到像喝水一样 ! 第1章 数据仓库概述 1.1 数据仓库概念 数…