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

Vue el-table 合并单元格

news 2026/2/10 4:33:02

一般常见的就是下图这种的单列，上下重复进行合并。
在这里插入图片描述
有时候可能也会需要多行多列的合并。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./assets/global.css"><!-- 引入样式 --><link rel="stylesheet" href="./assets/element-ui/lib/theme-chalk/index.css">
</head><body><div id="app"><el-table :data="tableData" :span-method="handleSpanMethod" border style="width: 100%"><el-table-column prop="id" label="ID" width="180"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="amount1" sortable label="数值 1"></el-table-column><el-table-column prop="amount2" sortable label="数值 2"></el-table-column><el-table-column prop="amount3" sortable label="数值 3"></el-table-column></el-table></div>
</body>
<!-- import Vue before Element -->
<script src="./assets/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="./assets/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data: function () {return {tableData: [{id: '12987122',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10}, {id: '12987123',name: '王小虎',amount1: '165',amount2: '4.43',amount3: 12}, {id: '12987124',name: '王小丫',amount1: '324',amount2: '1.9',amount3: 9}, {id: '12987125',name: '王小丫',amount1: '621',amount2: '2.2',amount3: 17}, {id: '12987126',name: '王小丫',amount1: '539',amount2: '4.1',amount3: 15}]}},mounted() {},methods: {handleSpanMethod({ row, column, rowIndex, columnIndex }) {// console.log(this.mergeByName(this.tableData, 1));// return this.mergeByRectangle(0, 0, 0, 2)(columnIndex, rowIndex)// return this.mergeByRectangleList([[0, 0, 0, 1], [2, 0, 2, 1], [3, 3, 4, 4]])(columnIndex, rowIndex)return this.mergeByRectangleList(this.mergeByName(this.tableData, 1))(columnIndex, rowIndex)},/* 矩形合并单元格子* (sx,sy) 开始坐标* (ex,ey) 结束坐标*/mergeByRectangle(sx, sy, ex, ey) {return function (x, y) {if (x == sx && y == sy) {return {rowspan: (ey - sy) + 1,colspan: (ex - sx) + 1}}if (sx <= x && x <= ex && sy <= y && y <= ey) {return {rowspan: 0,colspan: 0}}}},/* 矩形合并单元格* @param {[[]]} arraylist*/mergeByRectangleList(arraylist) {const that = this;return function (x, y) {for (let i = 0; i < arraylist.length; i++) {const arr = arraylist[i];const res = that.mergeByRectangle(...arr)(x, y)if (res) return res}}},/* 通过名称计算合并单元格*/mergeByName(tableData, column) {let arraylist = []let sx = column;let sy = 0;let ex = column;let ey = 0;let c = 0;let i = 1;while (i < tableData.length) {const curr = tableData[c];const next = tableData[i]if (curr.name == next.name) {ey++;}if (curr.name != next.name || i == tableData.length - 1) {arraylist.push([sx, sy, ex, ey])c = isy = cey = c}i++;}return arraylist}}})</script></html>

在线预览
https://linyisonger.github.io/H5.Examples/
源码仓库
https://github.com/linyisonger/H5.Examples.git

相关文章：

Vue el-table 合并单元格

一般常见的就是下图这种的单列&#xff0c;上下重复进行合并。 有时候可能也会需要多行多列的合并。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content&qu…...

编程日记 2024/3/19 20:41:29

面试算法-61-二叉树的右视图

题目 给定一个二叉树的 根节点 root&#xff0c;想象自己站在它的右侧&#xff0c;按照从顶部到底部的顺序&#xff0c;返回从右侧所能看到的节点值。 示例 1: 输入: [1,2,3,null,5,null,4] 输出: [1,3,4] 解 class Solution {public List<Integer> rightSideView(T…...

编程日记 2024/3/19 20:40:28

【鸿蒙HarmonyOS开发笔记】动画过渡效果之布局更新动画

概述 动画的原理是在一个时间段内&#xff0c;多次改变UI外观&#xff0c;由于人眼会产生视觉暂留&#xff0c;所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧&#xff0c;对应一次屏幕刷新&#xff0c;而决定动画流畅度的一个重要指标就是帧率FPS&#x…...

编程日记 2024/3/19 20:38:26

过路费的题解

目录 原题描述&#xff1a; 题目描述 输入格式&#xff1a; 输出格式&#xff1a; 样例输入&#xff1a; 样例输出&#xff1a; 数据范围&#xff1a; 提示&#xff1a; 主要思路&#xff1a; code: 原题描述&#xff1a; 题目描述 在某个遥远的国家里&#xff0c;有…...

编程日记 2024/3/19 20:37:25

51单片机LED8*8点阵显示坤坤跳舞打篮球画面

我们作为一名合格的 ikun&#xff0c;专业的小黑子&#xff0c;这个重要的知识必须学会。 先看效果&#xff1a; 51LED点阵_鸡你太美 这里我们首先要用到延时函数Delay&#xff1a; void Delay(unsigned int xms) {unsigned char i, j;while(xms--){ i 2;j 239;do{while (-…...

编程日记 2024/3/19 20:36:23

C++_day6：2024/3/18

作业1&#xff1a;编程题&#xff1a; 以下是一个简单的比喻&#xff0c;将多态概念与生活中的实际情况相联系&#xff1a; 比喻&#xff1a;动物园的讲解员和动物表演 想象一下你去了一家动物园&#xff0c;看到了许多不同种类的动物&#xff0c;如狮子、大象、猴子等。现在…...

编程日记 2024/3/19 20:35:22

汇编语言和IBM的关系

一 缺乏汇编的硬件没有灵魂 1964年&#xff0c;在IBM没有发明System 360大型计算机之前&#xff0c;IBM已经发明了很多计算机。如IBM 1952年发布的第一台商用计算机&#xff1a;701计算机。1959年&#xff0c;IBM首次利用晶体管、磁芯存储器、印刷电路技术&#xff0c;发明了小…...

编程日记 2024/3/19 20:31:18

堆（数据结构）

堆的概念及结构 如果有一个关键码的集合K { &#xff0c; &#xff0c; &#xff0c;…&#xff0c; }&#xff0c;把它的所有元素按完全二叉树的顺序存储方式存储在一个一维数组中&#xff0c;并满足&#xff1a; < 且 < ( > 且 > ) i 0&#xff0c;1&#xff…...

编程日记 2024/3/19 20:27:14

医药工厂5G智能制造数字孪生可视化平台，推进医药企业数字化转型

医药工厂5G智能制造数字孪生可视化平台&#xff0c;推进医药企业数字化转型。随着科技的不断发展&#xff0c;数字化转型已成为医药企业不可或缺的一部分。5G智能制造医药工厂数字孪生可视化平台作为数字化转型的重要工具&#xff0c;正在逐步改变医药企业的生产方式和管理模式…...

编程日记 2024/3/19 20:26:13

C语言学习--八种排序算法

目录 排序的概念 1.直接插入排序 基本思想 代码实现 算法分析 2.希尔排序 基本思想 代码实现 算法分析 3.冒泡排序 基本思想 代码实现 算法分析 4.快速排序 基本思想 代码实现 算法分析 5.简单选择排序 基本思想 代码实现 算法分析 6.堆排序 基本思想 代…...

编程日记 2024/3/19 20:24:11

Infineon_TC264智能车代码初探及C语言深度学习（二）

本篇文章记录我在智能车竞赛中&#xff0c;对 Infineon_TC264 这款芯片的底层库函数的学习分析。通过深入地对其库函数进行分析&#xff0c;C语言深入的知识得以再次在编程中呈现和运用。故觉得很有必要在此进行记录分享一下。 目录 ​编辑 一、代码段分析 NO.1 指向结构体…...

编程日记 2024/3/19 20:23:10

第十三届蓝桥杯（C/C++ 大学B组）

目录 试题 A: 九进制转十进制 试题 B: 顺子日期 试题 C: 刷题统计 试题 D: 修剪灌木 试题 E: X 进制减法 试题 F: 统计子矩阵 试题 G: 积木画 试题 H: 扫雷 试题 I: 李白打酒加强版 试题 J: 砍竹子 试题 A: 九进制转十进制 九进制正整数 ( 2022 )转换成十进制等于多…...

编程日记 2024/3/19 20:22:08

数据结构从入门到精通——排序的概念及运用

排序的概念及运用 前言一、排序的概念排序稳定性内部排序外部排序 二、排序运用三、常见的排序算法四、排序性能检测代码srand()clock() 五、oj排序测试代码 前言 排序是将数据按照一定规则重新排列的过程&#xff0c;常见规则有升序、降序等。排序算法如冒泡排序、快速排序等…...

编程日记 2024/3/19 20:18:03

react面试题总结

1、当调用 setState的时候&#xff0c;发生了什么操作&#xff1f; 当调用 setState时&#xff0c; React做的第一件事是将传递给setState的对象合并到组件的当前状态&#xff0c;这将启动一个称为和解&#xff08; reconciliation&#xff09;的过程。 和解的最终目标是&#…...

编程日记 2024/3/19 20:16:00

5_springboot_shiro_jwt_多端认证鉴权_禁用Cookie

1. Cookie是什么 ​ Cookie是一种在客户端&#xff08;通常是用户的Web浏览器&#xff09;和服务器之间进行状态管理的技术。当用户访问Web服务器时&#xff0c;服务器可以向用户的浏览器发送一个名为Cookie的小数据块。浏览器会将这个Cookie存储在客户端&#xff0c;为这个Co…...

编程日记 2024/3/19 20:14:59

条形码申请指南:外地人如何成功注册香港条形码

香港条形码是打造的通行证&#xff0c;消费者对香港条码有一定的认知&#xff0c;拥有香港条形码就获得消费者对产品的认可&#xff0c;香港条形码是全球条码中具有防伪功能的条形码&#xff0c;化妆品、护肤品、保健品、包装食品等行业的产品认证&#xff0c;就有必要申请香港…...

编程日记 2024/3/19 20:13:58

Covalent Network借助大规模的历史Web3数据集，推动人工智能发展

人工智能在众多领域中增强了区块链的实用性&#xff0c;反之亦然&#xff0c;区块链确保了 AI 模型所使用的数据的来源和质量。人工智能带来的生产力提升&#xff0c;将与区块链系统固有的安全性和透明度融合。 Covalent Network&#xff08;CQT&#xff09;正位于这两项互补技…...

编程日记 2024/3/19 20:12:56

test测试类-变量学习

test测试类 作用&#xff1a;标记到类上成为测试类&#xff0c;标记到方法上成为测试方法 变量&#xff1a;测试类的变量&#xff0c;在测试类括号中应用 1、invocationCount变量 意思是这个方法应该被调用的次数。 在测试框架中&#xff0c;特别是当使用参数化测试或数据驱动…...

编程日记 2024/3/19 20:10:53

【DL经典回顾】激活函数大汇总（二十七）（Bent Identity附代码和详细公式）

激活函数大汇总&#xff08;二十七&#xff09;&#xff08;Bent Identity附代码和详细公式&#xff09; 更多激活函数见激活函数大汇总列表 一、引言 欢迎来到我们深入探索神经网络核心组成部分——激活函数的系列博客。在人工智能的世界里&#xff0c;激活函数扮演着不可或…...

编程日记 2024/3/19 20:06:49

element-plus el-table表格默认选中某一行

需求&#xff1a;进入页面时默认选中表格第一行 <el-tableref"singleTableRef":data"tableData"highlight-current-rowrow-click"handleCurrentChange" ><el-table-column property"date" label"日期" /><…...

编程日记 2024/3/19 20:03:46

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2026/2/9 2:42:46

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2026/2/5 1:30:05

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2026/2/1 7:31:51

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2026/1/31 5:09:19

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2026/2/6 7:30:33

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2026/2/4 16:07:02

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2026/2/2 17:06:29

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

编程新知 2026/1/26 8:42:13