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

Vue el-table 合并单元格

news 文章来源：https://blog.csdn.net/linyisonger/article/details/136853336 2025/1/31 21:43:04

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

<!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

Vue+SpringBoot打造民宿预定管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用例设计2.2 功能设计2.2.1 租客角色2.2.2 房主角色2.2.3 系统管理员角色 三、系统展示四、核心代码4.1 查询民宿4.2 新增民宿4.3 新增民宿评价4.4 查询留言4.5 新增民宿订单 五、免责说明 一、摘要 1.1 项目介绍 基于…...

编程日记 2024/3/19 20:02:45

基于单片机的模糊PID炉温控制系统设计

摘 要 电热炉是在工业热处理的生产中广泛使用的一种设备&#xff0c;电热炉的温度控制系统存在时变性&#xff0c;非线性&#xff0c;滞后性等特征&#xff0c;难以用常规PID的控制器对系统达到很好的控制效果。当控温精度的要求高时&#xff0c;使用传统的控制理论方法难以达…...

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

深入浅出落地应用分析：AI数字人「微软小冰」

hi，各位，今天要聊的是AI小冰，机缘巧合，投递了这家公司的产品，正好最近在看数字人相关的，就详细剖析下这款产品！ 前言 小冰，全称为北京红棉小冰科技有限公司，前身为微软（亚洲）互联网工程院人工智能小冰团队，是微软全球最大的人工智能独立产品研发团队。作为微软全…...

编程日记 2024/3/19 19:58:39

【早鸟优惠|高录用|EI稳定检索】2024年虚拟现实、图像和信号处理国际学术会议（ICVISP 2024）诚邀投稿/参会！

【早鸟优惠|高录用|EI稳定检索】 2024年虚拟现实、图像和信号处理国际学术会议&#xff08;ICVISP 2024&#xff09;诚邀投稿/参会&#xff01; # 早鸟优惠 # 先投稿先送审 # #投稿免费参会、口头汇报及海报展示# 2024年虚拟现实、图像和信号处理国际学术会议&#xff08;I…...

编程日记 2024/3/19 19:57:38

CPU设计实战—异常处理指令

异常类型以及精确异常的处理 异常有点像中断&#xff0c;处理完还要回到原来的状态&#xff0c;所以需要对之前的状态进行保存。本CPU主要实现对以下异常的处理&#xff1a; 1.外部硬件中断 2.复位异常 3.系统调用异常&#xff08;发生在译码阶段&#xff09; 4.溢出异常&…...

编程日记 2024/3/19 19:56:37

Elasticsearch(13) match_phrase的使用

elasticsearch version&#xff1a; 7.10.1 match_phrase 语法 POST <index>/_search {"query": {"match_phrase": {"<field_name>": {"query": "<your_search_phrase>","slop": <max_dis…...

编程日记 2024/3/19 19:55:35

通过路由器监控，优化网络效率

路由器是网络的基本连接组件&#xff0c;路由器监控涉及将路由器网络作为一个整体进行管理&#xff0c;其中持续监控路由器的性能、运行状况、安全性和可用性&#xff0c;以确保更好的操作和最短的停机时间&#xff0c;因此监控路由器至关重要。 为什么路由器监控对组织很重要…...

编程日记 2024/3/19 19:54:34

使用canvas实现图纸标记及回显

图纸 图纸标记后的效果图 最近做的一个qms项目里面&#xff0c;需要前端在图纸上实现标记及标记后的内容还要能够回显&#xff0c;然后后端通过标记的点&#xff0c;去读取标记图纸的内容&#xff0c;如一些公式、数据之类的&#xff0c;目前实现的功能有 在图纸上面进行矩形…...

编程日记 2024/3/19 19:52:31

鸿蒙-自定义组件的生命周期

目录 自定义组件的生命周期 1.aboutToAppear 2.aboutToDisappear 3.onPageShow 4.onPageHide 5.onBackPress 日志输出 1.显示页面 2.页面点击返回按钮 3.页面跳转 4.页面返回 自定义组件的生命周期 先来一段列子 import router from ohos.router Entry Component…...

编程日记 2024/3/19 19:51:30

【Linux】自动化构建工具-make/Makefile

个人主页 &#xff1a; zxctscl 如有转载请先通知 文章目录 1. 前言2. 认识make/Makefile3. 了解make/Makefile原理3.1 依赖关系和依赖方法3.2 make检测的顺序3.3 PHONY:XXX 4. makefile内置符号 1. 前言 在上一篇中已经了解了【Linux】编译器-gcc/g使用&#xff0c;这次来一起…...

编程日记 2024/3/19 19:48:26

wordpress自动水印/中国疫情最新情况

HDFS的设计目标 通过上一篇文章的介绍我们已经了解到HDFS到底是怎样的东西，以及它是怎样通过多副本机制来提供高可靠性的，我们可以发现HDFS设计目标可以总结为以下几点： 非常巨大的分布式文件系统 运行在普通廉价的硬件上 易扩展、为用户提供性能不错的文件存储服务 HDFS的…...

编程日记 2025/1/31 18:59:54

金融企业网站制作/2022年时事政治热点汇总

以下是一个简单的FIR滤波器在FPGA上实现的Verilog代码： module fir_filter(input clk,input reset,input signed [15:0] data_in,output signed [15:0] data_out );parameter N = 4; // 滤波器阶数parameter COEFF_WIDTH = 16; // 系数位宽parameter DATA_WIDTH =...

编程日记 2025/1/31 8:26:46

哪些网站做写字楼出租/如何优化推广中的关键词

史蒂夫汤森的回答在理论上是正确的&#xff0c;但在实践中却没有&#xff0c;正如likwid指出的那样。我修改后的代码考虑了工作环境障碍 -默认情况下没有任何障碍超越这个障碍&#xff01;因此&#xff0c;自动$_变量可以在循环中使用&#xff0c;但不能直接在脚本块中使用&…...

编程日记 2025/1/31 7:24:02

做地区招聘网站/免费开发网站

一、前言 Protocol Buffer(简称Protobuf或PB) 是一个跨平台的消息交互协议&#xff0c;类似xml、json等 &#xff1b;别只会用Json和XML了&#xff0c;快来看看Google出品的Protocol Buffer&#xff01;由于是Google的出品&#xff0c;我相信Protocol Buffer已经具备足够的吸引…...

编程日记 2025/1/31 4:27:42

用网站空间可以做有后台的网站吗/关键词优化顾问

反复读了几遍王咏武的《向依赖关系宣战——依赖倒置、控制反转和依赖注入辨析》再次感受到自己要学的东西真的很多&#xff0c;废话不多说。下面阐述几个实例&#xff1a;1比如a框架要使用b框架&#xff0c;为了隔离这两个框架&#xff0c;就要在中间引入一个mid框架。为了防止…...

编程日记 2025/1/31 3:03:30

网站建设预算费用/51link友链

以10为底的log函数&#xff1a;形式为 double log10(double x)以e为底的log函数(即 ln)double log (double x)如何表达log 以a为底b的对数&#xff1a;用换底公式&#xff1a;可以表达为&#xff1a;log(a)/log(b)#include#includeusing namespace std;int main(){double a3.…...

编程日记 2025/1/31 0:09:28