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

Element+vue3.0 tabel合并单元格span-method

Element+vue3.0 tabel合并单元格 span-method

:span-method="objectSpanMethod"详解:

在 objectSpanMethod 方法中,rowspan 和 colspan 的值通常用来定义单元格的行跨度和列跨度。

一般来说,rowspan 和 colspan 的值应该是大于等于1的整数,表示单元格的跨度。如果设置为0,则表示该单元格不跨行或列。然而,通常在 Vue 的 Element UI 表格中,rowspan 和 colspan 的值不应该为0,因为这可能会导致布局问题或显示异常。如果你尝试将 rowspan 或 colspan 设置为0,不生成单元格。

  • rowspan: 定义单元格应横跨多少行。
  • colspan: 定义单元格应横跨多少列。
  • row: 当前行的数据对象。
  • column: 当前列的配置对象。
  • rowIndex: 当前行的索引(从0开始)。
  • columnIndex: 当前列的索引(从0开始)。

HTML

<el-table :data="tableData" :span-method="objectSpanMethod"><el-table-column prop="name" label="名称" width="180"></el-table-column><el-table-column prop="part" label="部件" width="180"></el-table-column><el-table-column prop="result" label="结果" width="180"></el-table-column><el-table-column prop="img" label="图片" width="180"></el-table-column><el-table-column prop="remark" label="备注" width="180"></el-table-column><!-- 其他列定义 --></el-table>

数据:

tableData: [{name: "整车外观",part: "车架编号照片1",result: true,img: "img",remark: "remark",},{name: "整车外观",part: "车架编号照片2",result: true,img: "img",remark: "remark",},{name: "整车外观",part: "车架编号照片3",result: true,img: "img",remark: "remark",},{name: "动力传动",part: "车架编号照片1",result: true,img: "img",remark: "remark",},{name: "动力传动",part: "车架编号照片2",result: true,img: "img",remark: "remark",},{name: "动力传动",part: "车架编号照片3",result: true,img: "img",remark: "remark",},{name: "车轮和转向检查",part: "车架编号照片1",result: true,img: "img",remark: "remark",},{name: "车轮和转向检查",part: "车架编号照片2",result: true,img: "img",remark: "remark",},{name: "车轮和转向检查",part: "车架编号照片3",result: true,img: "img",remark: "remark",},],

方法:

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {if (columnIndex === 0 || columnIndex === 2) {// 当前列为0的时候不进行操作单元格const name = row[column.property];const preRow = tableData.value[rowIndex - 1];const preValue = preRow ? preRow[column.property] : null;// 当前行的数据对象的name 是否和 上一行列的 name 是否相等 相等就不合并单元格if (name === preValue) {return { rowspan: 0, colspan: 0 }; // 不生成单元格} else {let rowspan = 1;for (let i = rowIndex + 1; i < tableData.value.length; i++) {const nextRow = tableData.value[i];const nextValue = nextRow[column.property];if (nextValue === name) {rowspan++;} else {break;}}return { rowspan, colspan: 1 };}}
};

下面是该代码的逻辑解释:

这段代码定义了一个名为 objectSpanMethod 的方法,该方法用于控制表格中单元格的合并。这个方法接收一个对象作为参数,该对象包含当前行的数据对象 (row)、当前列的配置对象 (column)、当前行的索引 (rowIndex) 和当前列的索引 (columnIndex)。

  • 条件判断:首先,它检查当前列的索引 (columnIndex) 是否为0。如果是,表示正在处理表格的第一列。

  • 获取数据和判断:

  • 获取当前行的数据对象中的属性值,通过 row[column.property] 获取。

  • 获取上一行的数据对象,通过 tableData.value[rowIndex - 1] 获取。然后,获取上一行相应属性的值。

  • 通过比较当前行的属性值和上一行的属性值,判断它们是否相等。
    返回值:

if

  • 如果当前行的属性值与上一行的属性值相等,则返回 { rowspan: 0, colspan: 0 },意味着不生成单元格。
  • 如果不相等,则进入另一个逻辑:

else

  • 初始化 rowspan 为1,表示当前单元格应该只占用一行。
  • 通过循环遍历下一行直到表格的末尾,检查下一行的相应属性值是否与当前行的属性值相等。
  • 如果相等,则 rowspan 值加1。
  • 如果不相等或者已经遍历到表格的末尾,则退出循环。
  • 最后,返回 { rowspan, colspan: 1 },表示单元格应跨越 rowspan 行和1列。

总的来说,这段代码是用于在Vue的Element UI表格中根据特定的逻辑(比较当前行和上一行的属性值)来控制单元格的合并。
在这里插入图片描述

相关文章:

Element+vue3.0 tabel合并单元格span-method

Elementvue3.0 tabel合并单元格 span-method :span-method"objectSpanMethod"详解&#xff1a; 在 objectSpanMethod 方法中&#xff0c;rowspan 和 colspan 的值通常用来定义单元格的行跨度和列跨度。 一般来说&#xff0c;rowspan 和 colspan 的值应该是大于等于…...

Python学习笔记第七十九天(OpenCV轨迹栏)

Python学习笔记第七十九天 OpenCV轨迹栏cv.createTrackbarcv.getTrackbarPos两者合并运用 后记 OpenCV轨迹栏 cv.getTrackbarPos 和 cv.createTrackbar 是 OpenCV 库中用于创建和获取跟踪条位置的函数。这些函数通常用于在视频处理或图像处理应用程序中创建用户界面&#xff0…...

uniapp自定义顶部导航并解决打包成apk后getMenuButtonBoundingClientRect方法失效问题

需求&#xff1a;要在app上的顶部导航提示哪里添加一些东西进去&#xff0c;用uniapp自带的肯定不行啊&#xff0c;所以自定义了所有的页面的顶部导航&#xff0c;之后自定义后用手机调试发现 uni.getMenuButtonBoundingClientRect()这个方法的top获取不到....网上找了很多种方…...

C++入门【26-C++ Null 指针】

在变量声明的时候&#xff0c;如果没有确切的地址可以赋值&#xff0c;为指针变量赋一个 NULL 值是一个良好的编程习惯。赋为 NULL 值的指针被称为空指针。 NULL 指针是一个定义在标准库中的值为零的常量。请看下面的程序&#xff1a; 实例 #include <iostream> using…...

Linux第14步_安装FTP服务器

安装“vim编辑器”后&#xff0c;我们紧接着“安装FTP服务器”。 1、在安装前&#xff0c;要检查虚拟机可以上网&#xff0c;否则可能会导致安装失败。 2、在虚拟机界面右击鼠标&#xff0c;弹出下面的对话框 3、点击“打开终端(E)”&#xff0c;得到下面的界面 &#xff1a;…...

Linux截图方法推荐

因为经常会遇到以图为证的情况&#xff0c;而办公设备基本都是linux,所以汇总一下常见的linux截图方式。 1&#xff1a;在 Linux 中系统集成的截图的默认方式 你想要截取整个屏幕&#xff1f;屏幕中的某个区域&#xff1f;某个特定的窗口&#xff1f; 如果只需要获取一张屏幕…...

在Gitee上维护Erpnext源

在Gitee上维护Erpnext源 官方的frappe和erpnext地址: GitHub - frappe/frappe: Low code web framework for real world applications, in Python and Javascript GitHub - frappe/erpnext: Free and Open Source Enterprise Resource Planning (ERP) 1, 仓库地址输入frappe的官…...

2024.1.9 基于 Jedis 通过 Java 客户端连接 Redis 服务器

目录 引言 RESP 协议 Redis 通信过程 实现步骤 步骤一 步骤二 步骤三 步骤四 引言 在 Redis 命令行客户端中手敲命令并不是我们日常开发中的主要形式而更多的时候是使用 Redis 的 API 来实现定制化的 Redis 客户端程序&#xff0c;进而操作 Redis 服务器即使用程序来操…...

软件测试|SQL ORDER BY排序利器使用

简介 在SQL查询语言中&#xff0c;ORDER BY子句是一项重要的功能&#xff0c;它允许我们按照指定的列或表达式对查询结果进行排序。本文将详细介绍SQL ORDER BY子句的用法、常见排序方式以及在实际应用中的应用场景。 ORDER BY子句 SQL是一种用于管理和操作关系型数据库的强…...

苹果手机IOS软件应用IPA砸壳包提取完整教程

我们有很多小伙伴可能想要获取到苹果手机软件的安装包但又不知该如何获取&#xff0c;本文就教你如何获取到IOS软件的IPA砸壳包 首先我们需要准备一台越狱的苹果IOS设备&#xff0c;如果不知如何越狱的可以参考这篇苹果手机越狱教程&#xff1a;https://www.hereitis.cn/artic…...

「 网络安全术语解读 」内容安全策略CSP详解

引言&#xff1a;什么是CSP&#xff0c;它为什么可以防御一些常见的网络攻击&#xff0c;比如XSS攻击&#xff0c;具体原理是什么&#xff1f;以及如何绕过CSP&#xff1f; 1. CSP定义 CSP&#xff08;Content Security Policy&#xff0c;内容安全策略&#xff09;是一种网络…...

Docker与微服务实战(基础篇)

Docker与微服务实战&#xff08;基础篇&#xff09; 1、Docker简介2、Docker安装步骤1.Centos7及以上的版本2.卸载旧版本3.yum安装gcc相关4.安装需要的软件包5.设置stable镜像仓库【国内aliyun】6.更新yum软件包索引--以后安装更快捷7.安装Docker-Ce8.启动Docker9.测试10.卸载1…...

「实用分享」如何用Telerik UI组件创建可扩展的企业级WPF应用?

Telerik UI for WPF拥有超过100个控件来创建美观、高性能的桌面应用程序&#xff0c;同时还能快速构建企业级办公WPF应用程序。UI for WPF支持MVVM、触摸等&#xff0c;创建的应用程序可靠且结构良好&#xff0c;非常容易维护&#xff0c;其直观的API将无缝地集成Visual Studio…...

【Docker基础三】Docker安装Redis

下载镜像 根据自己需要下载指定版本镜像&#xff0c;所有版本看这&#xff1a;Index of /releases/ (redis.io) 或 https://hub.docker.com/_/redis # 下载指定版本redis镜像 docker pull redis:7.2.0 # 查看镜像是否下载成功 docker images 创建挂载目录 # 宿主机上创建挂…...

【Flink精讲】Flink数据延迟处理

面试题&#xff1a;Flink数据延迟怎么处理&#xff1f; 将迟到数据直接丢弃【默认方案】将迟到数据收集起来另外处理&#xff08;旁路输出&#xff09;重新激活已经关闭的窗口并重新计算以修正结果&#xff08;Lateness&#xff09; Flink数据延迟处理方案 用一个案例说明三…...

vue项目心得(复盘)

在编写项目过程中&#xff0c;首先是接手一个需要优化的项目&#xff0c;需要查看vue.config.js环境配置地址&#xff0c;确认好测试地址后进行开发&#xff0c;目前在开发过程中&#xff0c;遇到的最多的问题就是关于组件间的&#xff0c; 组件间传值 1、父组件异步传值&…...

Linux——firewalld防火墙(一)

一、Linux防火墙基础 Linux 的防火墙体系主要工作在网络层.针对TCP/P数据包实时过滤和限制.属于典型的包过滤防火墙&#xff08;或称为网络层防火墙)。Linux系统的防火墙体系基于内核编码实现&#xff0e;具有非常稳定的性能和高效率,也因此获得广泛的应用.在CentOS 7系统中几种…...

JMeter之Windows安装

JMeter之Windows安装 一、安装JDK二、安装JMeter1、下载JMeter2、配置环境变量3、验证JMeter 三、扩展知识1、汉化 一、安装JDK 略 二、安装JMeter 1、下载JMeter 官网地址&#xff1a;https://jmeter.apache.org/download_jmeter.cgi 放到本地目录下 2、配置环境变量 变量…...

用通俗易懂的方式讲解:大模型 RAG 在 LangChain 中的应用实战

Retrieval-Augmented Generation&#xff08;RAG&#xff09;是一种强大的技术&#xff0c;能够提高大型语言模型&#xff08;LLM&#xff09;的性能&#xff0c;使其能够从外部知识源中检索信息以生成更准确、具有上下文的回答。 本文将详细介绍 RAG 在 LangChain 中的应用&a…...

正则表达式的语法

如果要想灵活的运用正则表达式&#xff0c;必须了解其中各种元素字符的功能&#xff0c;元字符从功能上大致分为&#xff1a; 限定符 选择匹配符 分组组合和反向引用符 特殊字符 字符匹配符 定位符 我们先说一下元字符的转义号 元字符(Metacharacter)-转义号 \\ \\ 符号…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

图解JavaScript原型:原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

RabbitMQ 各类交换机

为什么要用交换机&#xff1f; 交换机用来路由消息。如果直发队列&#xff0c;这个消息就被处理消失了&#xff0c;那别的队列也需要这个消息怎么办&#xff1f;那就要用到交换机 交换机类型 1&#xff0c;fanout&#xff1a;广播 特点 广播所有消息​​&#xff1a;将消息…...