实现el-table合并列

news2024/11/30 8:41:15

效果图如下
在这里插入图片描述

<el-table :data="atlasDataList" style="width: 100%" :span-method="spanMethod">
              <el-table-column prop="stationName" label="" width="180" />
              <el-table-column prop="atlasNumber" label="" width="180" />
              <el-table-column prop="atlasName" label="图册名称" width="180" />
            </el-table>
            
<script setup>
    import { objectSpanMethod } from './spanMethod';
    
	//调用合并行的方法
    const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
      if (columnIndex < 2) { // 只合并前两列
        return objectSpanMethod({ row, column, rowIndex, columnIndex }, atlasTypeList.value.length);
      } else {
        return { rowspan: 1, colspan: 1 }; // 不合并其他列
      }
    };
    
	// 合并列的计算方法
	export const objectSpanMethod = ({
                                     row,
                                     column,
                                     rowIndex,
                                     columnIndex,
                                 }, mergeCount) => {
   		 // 每 mergeCount 行合并
   		 if (rowIndex % mergeCount === 0) {
		        return {
		            rowspan: mergeCount,
		            colspan: 1,
		        };
		    } else {
		        return {
		            rowspan: 0,
		            colspan: 0,
		        };
		    }
		};

</script>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

刷题日记:面试经典 150 题 DAY6

刷题日记&#xff1a;面试经典 150 题 DAY6 392. 判断子序列167. 两数之和 II - 输入有序数组11. 盛最多水的容器15. 三数之和209. 长度最小的子数组 392. 判断子序列 原题链接 392. 判断子序列 双指针&#xff0c;i指向s&#xff0c;j指向t 如果s[i]t[j]&#xff0c;则匹配…

ARM开发板实现24位BMP图片缩放

ARM开发板实现24位BMP图片缩放 一、linux平台bmp图片缩放 最近想在ARM开发板实现BMP图片的缩放&#xff0c;查看了一些资料&#xff0c;大家部分理论知识可参考&#xff1a; akynazh博主 &#xff0c;这位博主程序以window平台为主进行显示&#xff0c;发现在linux平台下编译…

【Leetcode】1793. 好子数组的最大分数

文章目录 题目思路代码复杂度分析时间复杂度空间复杂度 结果总结 题目 题目链接&#x1f517; 给你一个整数数组 n u m s nums nums &#xff08;下标从 0 0 0 开始&#xff09;和一个整数 k k k 。 一个子数组 ( i , j ) (i, j) (i,j) 的 分数 定义为 m i n ( n u m s …

Livox激光雷达 mid360 跑 fastlio2 - 流程记录

mid360 跑 fastlio2 一、配置 mid360 环境1.1、主机配置静态IP为192.168.1.501.2、Livox-SDK21.3、Livox_ros_driver2二、Fast-lio22.1、下载源码2.2、修改代码2.3、编译、运行 提示一下&#xff0c;如果在一些板上&#xff08;比如rk3399&#xff0c;或者是树莓派 &#xff0…

蓝桥杯java组 螺旋折线

题目描述 如图所示的螺旋折线经过平面上所有整点恰好一次。 对于整点(X, Y)&#xff0c;我们定义它到原点的距离dis(X, Y)是从原点到(X, Y)的螺旋折线段的长度。 例如dis(0, 1)3, dis(-2, -1)9 给出整点坐标(X, Y)&#xff0c;你能计算出dis(X, Y)吗&#xff1f; 【输入格…

Spring-AOP面相切面编程示例(有详细注释)

前提知识Spring-IOC容器注解方式使用https://blog.csdn.net/m0_61160520/article/details/136784799?spm1001.2014.3001.5501切点表达式https://blog.csdn.net/m0_61160520/article/details/136782885?spm1001.2014.3001.5501 案例 1.创建项目 2.导入依赖 <dependencie…

CSS 三大特性 详细讲解

CSS 三大特性及代码解释 层叠性 当相同选择器设置相同样式且发生冲突时&#xff0c;此时后者的样式会覆盖&#xff08;层叠&#xff09;前者冲突样式。CSS的层叠性就是用于解决样式冲突问题。 Input&#xff1a; <style>div {color: red;}div { color: blue; <!-…

webconfig-boot分布式项目Web一站式配置

1、前言 最近利用空余时间写了一个项目webconfig-boot 。该项目主要配置了web项目常用的一些配置&#xff0c;如统一参数校验、统一异常捕获、统一日期的处理、常用过滤器、常用注解等。引入依赖接口完成常规的web配置。 这里也是总结了笔者在项目开发中遇到的一些常用的配置…

springboot项目讲解

技术栈 vue(前端) springboot(后端主框架) mybatis&#xff08;ORM&#xff0c;用于后端和数据库的映射&#xff0c;即java对象转换成表&#xff09; mysql (关系型数据库) 顶层结构 .idea&#xff1a; idea缓存文件(不需要管) src&#xff1a;代码核心文件夹 —main&#xf…

Windows Terminal配置 美化

Windows 终端自定义提示符设置 | Microsoft Learn 安装PowerShell7 在 Windows 上安装 PowerShell - PowerShell | Microsoft Learn 设置默认为 PowerShell7 安装 在powerShell 开启远程权限 Set-ExecutionPolicy RemoteSigned -scope CurrentUserscoop 执行 iwr -useb ht…

王道机试C++续第6章 数学问题 贪心算法和蓝桥杯真题Day37倒计时24天

6.4 分解质因数 上一节讨论了素数的问题&#xff0c;而素数常用于分解质因数。每个数都可以写成一个或几个质数相乘的形式&#xff0c;其中每个质数都是这个数的质因数。把一个数用质因数相乘的形式表示出来&#xff0c;就称为分解质因数。例如&#xff0c;对一个数 x 分解素…

Centos7没有可用软件包 ifconfig问题解决

问题描述 在Centos7中查看ip没有ifconfig&#xff0c;使用yum安装ifconfig报错没有可用软件包 ifconfig问题解决 [rootlocalhost etc]# yum -y install ifconfig 已加载插件&#xff1a;fastestmirror base …

进程间通信 之 共享内存

目录 什么是共享内存&#xff1f; 共享内存的系统调用接口 共享内存 进程间通信的本质及前提&#xff1a;让不同的进程看到同一份资源&#xff01; 共享内存区是最快的IPC形式。一旦这样的内存映射到共享它的进程的地址空间&#xff0c;这些进程间数据传递不再涉及到内核&a…

鸿蒙开发实战:【网络管理-Socket连接】

介绍 本示例主要演示了Socket在网络通信方面的应用&#xff0c;展示了Socket在两端设备的连接验证、聊天通信方面的应用。 效果预览 使用说明 1.打开应用&#xff0c;点击用户文本框选择要登录的用户&#xff0c;并输入另一个设备的IP地址&#xff0c;点击确定按钮进入已登录…

【毛毛讲书】【好运】为什么有些人天生就有好运眷顾?

重磅专栏推荐&#xff1a; 《大模型AIGC》 《课程大纲》 《知识星球》 本专栏致力于探索和讨论当今最前沿的技术趋势和应用领域&#xff0c;包括但不限于ChatGPT和Stable Diffusion等。我们将深入研究大型模型的开发和应用&#xff0c;以及与之相关的人工智能生成内容&#xff…

什么是web组态?Web组态软件哪个好用?

随着工业4.0的到来&#xff0c;物联网、大数据、人工智能等技术的融合应用&#xff0c;使得工业领域正在经历一场深刻的变革。在这个过程中&#xff0c;Web组态技术以其独特的优势&#xff0c;正在逐渐受到越来越多企业的关注和认可。那么&#xff0c;什么是Web组态&#xff1f…

轻巧的elasticsearch可视化工具

一、概述 常见的ES可视化工具有&#xff1a; kibanaelasticsearch-headElasticHDDejavucerebroelasticview 一、安装elasticview 在众多ES可视化龚居中&#xff0c;elasticview是一款比较轻量简洁&#xff0c;兼容性较好&#xff0c;可以兼容多个ES版本&#xff0c;不但可以进…

[蓝桥杯 2020 省 AB3] 限高杆

分层图建图典题 #include<bits/stdc.h> using namespace std; using ll long long; #define int long long const int N 6e510; const int inf 0x3f3f3f3f; const int mod 1e97; int e[N],ne[N],w[N],h[N],idx; void add(int a,int b,int c){e[idx] b,ne[idx] h[a]…

外键约束

目录 外键约束 对数据表进行初期设计&#xff0c;暂时不使用外键 验证限制三 验证级联删除 设置级联更新 Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 外键约束 外键约束主要是在父子表关系中体现的一种约束操作。…

【二叉树】算法例题

目录 九、二叉树 68. 二叉树的最大深度 ① 69. 相同的树 ① √ 70. 翻转二叉树 ① 71. 对称二叉树 ① 72. 从前序与中序遍历序列构造二叉树 ② 73. 从中序与后续遍历序列构造二叉树 ② 74. 填充每个节点的下一个右侧节点指针 II ② 75. 二叉树展开为链表 ② 76.…