当前位置: 首页 > news >正文

el-table动态合并

废话就不多说了,直接上代码!!!

合并行

// 方法一
<template><div class="container"><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 type="index" label="序号" width="100"></el-table-column><el-table-column prop="product_name" label="辅助"></el-table-column><el-table-column prop="cap_name" label="法师"></el-table-column><el-table-column prop="name" label="刺客"></el-table-column><el-table-column prop="name1" label="坦克"></el-table-column><el-table-column prop="name2" label="射手"></el-table-column></el-table></div>
</template>
<script>
export default {name: 'tableCom',data () {return {dataSource: [{product_name: '姜子牙',cap_name: '诸葛亮',name: '韩信',name1: '程咬金',name2: '狄仁杰'},{product_name: '蔡文姬',cap_name: '妲己',name: '孙悟空',name1: '廉颇',name2: '后裔'},{product_name: '蔡文姬',cap_name: '貂蝉',name: '橘右京',name1: '橘右京',name2: '孙尚香'},{product_name: '大桥',cap_name: '西施',name: '赵云',name1: '刘禅',name2: '刘禅'}]}},methods: {arraySpanMethod ({ row, column, rowIndex, columnIndex }) {// 合并行  产品名字相同合并if (columnIndex === 1) {if (rowIndex === 0 || row.product_name !== this.dataSource[rowIndex - 1].product_name) {let rowspan = 0this.dataSource.forEach(element => {if (element.product_name === row.product_name) {rowspan++}})return [rowspan, 1]} else {return [0, 0]}}}},created () {}
}
</script>
// 方法二
<template><div class="container"><el-table :data="tableData" :border="true":header-cell-style="{ 'font-weight': 'normal', 'text-align': 'center' }":cell-style="{ 'text-align': 'center' }" size="mini" style="width: 100%" :span-method="handleSpanMethod"><el-table-column type="index" label="序号" width="100"></el-table-column><el-table-column prop="product_name" label="辅助"></el-table-column><el-table-column prop="cap_name" label="法师"></el-table-column><el-table-column prop="name" label="刺客"></el-table-column><el-table-column prop="name1" label="坦克"></el-table-column><el-table-column prop="name2" label="射手"></el-table-column></el-table></div>
</template>
<script>
export default {name: 'tableCom',data () {return {tableData: [{product_name: '姜子牙',cap_name: '诸葛亮',name: '韩信',name1: '程咬金',name2: '狄仁杰'},{product_name: '蔡文姬',cap_name: '妲己',name: '孙悟空',name1: '廉颇',name2: '后裔'},{product_name: '蔡文姬',cap_name: '貂蝉',name: '橘右京',name1: '橘右京',name2: '孙尚香'},{product_name: '大桥',cap_name: '貂蝉',name: '赵云',name1: '刘禅',name2: '刘禅'}]}},methods: {handleSpanMethod ({ row, column, rowIndex }) {if (column.property === 'product_name' || column.property === 'cap_name') {// 获取当前行与上一行的属性值const currentProperty = row[column.property]const previousProperty = rowIndex > 0 ? this.tableData[rowIndex - 1][column.property] : null// 判断当前行与上一行的属性值是否相同if (currentProperty === previousProperty) {return {rowspan: 0, // 与上一行相同的属性值,设置跨行数为0,即不显示colspan: 1 // 不进行跨列}}// 查找后续行是否与当前行的属性值相同let rowspan = 1for (let i = rowIndex + 1; i < this.tableData.length; i++) {if (this.tableData[i][column.property] === currentProperty) {rowspan++} else {break}}return {rowspan: rowspan, // 跨行数为相同属性值的行数colspan: 1 // 不进行跨列}}}},created () {}
}
</script>

效果图:

合并列:

<template><div class="container"><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 type="index" label="序号" width="100"></el-table-column><el-table-column prop="product_name" label="辅助"></el-table-column><el-table-column prop="cap_name" label="法师"></el-table-column><el-table-column prop="name" label="刺客"></el-table-column><el-table-column prop="name1" label="坦克"></el-table-column><el-table-column prop="name2" label="射手"></el-table-column></el-table></div>
</template>
<script>
export default {name: 'tableCom',data () {return {dataSource: [{product_name: '姜子牙',cap_name: '诸葛亮',name: '韩信',name1: '程咬金',name2: '狄仁杰'},{product_name: '蔡文姬',cap_name: '妲己',name: '孙悟空',name1: '廉颇',name2: '后裔'},{product_name: '蔡文姬',cap_name: '貂蝉',name: '橘右京',name1: '橘右京',name2: '孙尚香'},{product_name: '大桥',cap_name: '西施',name: '赵云',name1: '刘禅',name2: '刘禅'}]}},methods: {arraySpanMethod ({ row, column, rowIndex, columnIndex }) {// 合并列 名称值都为“橘右京”、“刘禅” 的合并if (columnIndex > 2) {let colspan = 0const colkeys = Object.keys(row)const currentindex = columnIndex - 1if (row[colkeys[currentindex]] === '橘右京' || row[colkeys[currentindex]] === '刘禅') {if (row[colkeys[currentindex - 1]] !== row[colkeys[currentindex]]) {for (let i = currentindex; i < colkeys.length; i++) {if (row[colkeys[i]] === '橘右京' || row[colkeys[i]] === '刘禅') {colspan++} else {break}}return [1, colspan]} else {return [0, 0]}}}}},created () {}
}
</script>

效果图:

相关文章:

el-table动态合并

废话就不多说了&#xff0c;直接上代码&#xff01;&#xff01;&#xff01; 合并行 // 方法一 <template><div class"container"><el-table :data"dataSource" :border"true":header-cell-style"{ font-weight: normal,…...

【DevOps】产品需求文档(PRD)与常见原型软件

文章目录 1、PRD介绍1.1、概述1.2、前提条件1.3、主要目的1.4、关键内容1.5、表述方式1.6、需求评审人员1.7、一般内容结构 2、需求流程3、常见原型软件3.1、Word3.2、Axure3.2.1、详细介绍3.2.2、应用分类3.2.3、优缺点 3.3、摹客RP3.4、蓝湖3.5、GUI Design Studio 1、PRD介绍…...

【QT+QGIS跨平台编译】之十八:【Expat+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

文章目录 一、Expat介绍二、文件下载三、文件分析四、pro文件五、编译实践一、Expat介绍 Expat库最初由James Clark创建,已经成为许多编程语言中常用的XML解析工具。它以其简单、快速和可靠的特点而受到广泛的认可和使用。 Expat库的优点包括: 快速:Expat的解析速度非常快…...

20240203

1.项目经理正在为新项目制订进度计划&#xff0c;项目的成功取决于使用需要政府颁发特殊环境许可证的设备&#xff0c;在网络图的设计过程中&#xff0c;项目经理应该做什么以确保正确的活动排序&#xff1f; A.使用滚动式规划考虑项目不确定性 B.分析外部依赖关系&#xff0c;…...

【Spark实践6】特征转换FeatureTransformers实践Scala版--补充算子

本节介绍了用于处理特征的算法&#xff0c;大致可以分为以下几组&#xff1a; 提取&#xff08;Extraction&#xff09;&#xff1a;从“原始”数据中提取特征。转换&#xff08;Transformation&#xff09;&#xff1a;缩放、转换或修改特征。选择&#xff08;Selection&…...

【知识点】设计模式

创建型 单例模式 Singleton&#xff1a;确保一个类只有一个实例&#xff0c;并提供该实例的全局访问点 使用一个私有构造方法、一个私有静态变量以及一个公有静态方法来实现。私有构造方法确保了不能通过构造方法来创建对象实例&#xff0c;只能通过公有静态方法返回唯一的私…...

WPS WORD 宏导出高亮文本

WPS手机版可以直接导出高亮文本&#xff0c;但只能导出手机编辑的部分&#xff0c;如果同时在电脑上编辑过&#xff0c;电脑上高亮的无法导出&#xff0c;因为作者不一样。 但WPS电脑版没有这个功能&#xff0c;只能通过宏编程实现。 这里利用了审阅模式&#xff0c;在文字高亮…...

python 基础知识点(蓝桥杯python科目个人复习计划32)

今日复习内容&#xff1a;基础算法中的位运算 1.简介 位运算就是对二进制进行操作的运算方式&#xff0c;分为与运算&#xff0c;或运算&#xff0c;异或运算&#xff0c;取反&#xff0c;左移和右移。 &#xff08;1&#xff09;与运算 xyx&y000010100111 (2)或运算 …...

(算法二)滑动窗口

滑动窗口&#xff1a;既一块区域进行滑动&#xff0c;且不回退 往往解决的是一段连续空间中满足条件的最长或者最短子数组&#xff08;串&#xff09; 是由暴力解法&#xff08;优化&#xff09;——>不回退的滑动窗口解法 长度最小的子数组 无重复字符的最长子数组 此类题…...

【Go语言成长之路】Hello Go

文章目录 Hello Go一、建立工程目录二、开启代码追踪三、编写代码四、测试代码 Hello Go 一、建立工程目录 pzspzs-ubuntu22:~$ mkdir go_study/hello -p pzspzs-ubuntu22:~$ cd go_study/hello​ 在hello目录下&#xff0c;我们会编写属于自己的第一个Go demo例子&#xff0…...

大数据应用开发3-Scala笔记1

一、编程框架 Scala语言是在JVM上运行的&#xff0c;兼容Java语法 区分大小写 - Scala是大小写敏感的&#xff0c;这意味着标识Hello 和 hello在Scala中会有不同的含义。 类名 - 对于所有的类名的第一个字母要大写。 如果需要使用几个单词来构成一个类的名称&#xff0c;每个…...

android 网络拦截器统一处理请求参数和返回值加解密实现

前言 项目中遇到参数加密和返回结果加密的业务 这里写一下实现 一来加深记忆 二来为以后参考铺垫 需求 项目在开发中涉及到 登陆 发验证码 认证 等前期准备接口 这些接口需要单独处理 比如不加密 或者有其他的业务需求 剩下的是登陆成功以后的业务需求接口 针对入参和返回值…...

Jmeter直连mysql数据库教程

mysql数据库能够通过Navicat等远程连接工具连接 下载驱动并加入jmeter 1.mysql驱动下载地址&#xff1a;MySQL :: Download MySQL Connector/J (Archived Versions) 找到对应的驱动下载&#xff1a;如下图&#xff1a; 把驱动jar包加入jmeter 配置jmeter连接mysql数据库…...

2024美赛数学建模B题思路分析 - 搜索潜水器

1 赛题 问题B&#xff1a;搜索潜水器 总部位于希腊的小型海上巡航潜艇&#xff08;MCMS&#xff09;公司&#xff0c;制造能够将人类运送到海洋最深处的潜水器。潜水器被移动到该位置&#xff0c;并不受主船的束缚。MCMS现在希望用他们的潜水器带游客在爱奥尼亚海底探险&…...

Tomcat在Java web的应用

Tomcat在Java web的应用 本来这篇博客顺应之前的内容&#xff0c;应该是需要写Tomcat的简介、基本使用、配置和部署项目、Web的项目结构、创建MavenWeb、idea本地集成以及Tomcat的Maven插件的笔记内容&#xff0c;但是总觉得没必要&#xff0c;因为这些内容网上肯定很多了&…...

Python爬虫某云免费音乐——多线程批量下载

重点一&#xff1a;每首音乐的下载地址 重点二&#xff1a;如何判断是免费音乐 重点三&#xff1a;如何用线程下载并保存 重点四&#xff1a;如何规避运行错误导致子线程死掉 重点五&#xff1a;如何管理子线程合理运行 需要全部代码的私信或者VX:Kmwcx1109 运行效果&…...

Python实现TCP和UDP通信

目录 一&#xff1a;TCP 二&#xff1a;UDP 一&#xff1a;TCP 在Python中实现TCP通信可以通过使用内置的socket模块来完成。以下是一个简单的示例&#xff0c;展示了如何使用Python的socket模块创建一个TCP客户端和服务器。 TCP服务器 import socket def start_server(): s…...

用HTML5 + JavaScript实现下雪效果

用HTML5 JavaScript实现下雪效果 下面是用HTML5 JavaScript实现下雪效果示例&#xff0c;展示了如何使用 HTML5 的 <canvas> 元素以及 JavaScript 来创建下雪效果。效果如下&#xff1a; 源码如下&#xff1a; <!DOCTYPE html> <html lang"en">…...

PDF操作——批量删除末页

一、说明 由于PDF末页为空白页或者是免责声明需要删除&#xff0c;涉及的文件比较多&#xff0c;因此写了一小段代码进行处理。 二、完整架构流程 这个代码的整体架构流程可以分为以下几个步骤&#xff1a; 导入所需的库&#xff1a;首先&#xff0c;代码导入了PyPDF2和os两…...

Jasperreport 生成 PDF之省纸模式

省纸模式顾名思义就是节省纸张&#xff0c;使用 Jasper 去生成 PDF 的时候如果进行分组打印的时候&#xff0c;一页 A4 纸只会打印一组数据。这种情况下&#xff0c;如果每组数据特别少&#xff0c;只有几行&#xff0c;一页 A4 纸张根本用不了&#xff0c;就会另起一页继续打印…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...