el-table表格合并某一列

需求:按照下图完成单元格合并,数据展示

可以看到科室列是需要合并的 并加背景色展示;具体代码如下:

<el-tableref="tableA":data="tableDataList":header-cell-style="{ backgroundColor: '#f2dcdb', color: '#333', fontSize: '14px', fontWeight: '600', height: '30px' }"style="width: 100%; margin: 0 auto"height="100%"align="center"row-key="id"stripeborder:span-method="spanMethod":cell-style="modelCdCellStyle"><template v-for="(item) in viewColumns"><el-table-column:key="item.prop":fixed="item.fixed":prop="item.prop":align="item.align":label="item.label":min-width="item.width":show-overflow-tooltip="true"/></template></el-table>viewColumns: [{ prop: 'system', width: '100', align: 'center', label: '科室', fixed: false },{ prop: 'systemCode', width: '120', align: 'center', label: '系', fixed: false },{ prop: 'lastCount', width: '120', align: 'center', label: '上月累计', fixed: false },{ prop: 'addCount', width: '90', align: 'center', label: '新增', fixed: false },{ prop: 'modCount', width: '120', align: 'center', label: '修改', fixed: false },{ prop: 'newCount', width: '120', align: 'center', label: '当月累计', fixed: false }],
    // 合并spanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) { // 针对第一列if (rowIndex === 0) {return {rowspan: this.tableDataList.length, // 合并从第一行到最后一行colspan: 1}} else {return {rowspan: 0, // 后续行不显示内容colspan: 0}}}return { rowspan: 1, colspan: 1 } // 其他列不合并},
//设置颜色的modelCdCellStyle({ row, column, rowIndex, columnIndex }) {const lastRowIndex = this.tableDataList.length - 1if (rowIndex === 0 && column.property == 'system') {return { backgroundColor: '#c6d9f1', color: '#333', fontSize: '16px', fontWeight: '600' } } else if (rowIndex === lastRowIndex) {return { backgroundColor: '#c6d9f1', color: '#333', fontSize: '16px', fontWeight: '600' } }return {}}

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS Grid 布局全攻略:从基础到进阶

文章目录 一.Grid 是什么二.示例代码1. 基础使用 - 固定宽高2.百分百宽高3.重复设置-repeat4.单位-fr5.自适应6.间距定义其他 一.Grid 是什么 CSS 中 Grid 是一种强大的布局方式&#xff0c;它可以同时处理行和列 Grid 和Flex有一些类似&#xff0c;都是由父元素包裹子元素使用…

数据结构:包装类和泛型

目录 一、包装类 1、基本数据类型和对应的包装类 2、装箱和拆箱 3、自动装箱和自动拆箱 二、泛型 1、什么是泛型 2、泛型语法 3、泛型类 4、擦除机制 5、泛型的上界 6、泛型方法 三、通配符 1、什么是通配符 2、通配符上界 3、通配符下界 &#x1f4da…

备考蓝桥杯:顺序表相关算法题

目录 询问学号 寄包柜 移动0 颜色分类 合并两个有序数组 物品移动 询问学号 我们的思路&#xff1a;创建一个顺序表存储从1开始依次存放进入教室的学生学号&#xff0c;然后查询 #include <iostream> #include <vector> using namespace std; const int N 2…

Python入门教程 —— 网络编程

1.网络通信概念 简单来说,网络是用物理链路将各个孤立的工作站或主机相连在一起,组成数据链路,从而达到资源共享和通信的目的。 使用网络的目的,就是为了联通多方然后进行通信,即把数据从一方传递给另外一方。 前面的学习编写的程序都是单机的,即不能和其他电脑上的程…

C#异步多线程——ThreadPool线程池

C#实现异步多线程的方式有多种&#xff0c;以下总结的是ThreadPool的用法。 线程池的特点 线程池受CLR管理&#xff0c;线程的生命周期&#xff0c;任务调度等细节都不需要我们操心了&#xff0c;我们只需要专注于任务实现&#xff0c;使用ThreadPool提供的静态方法把我们的任…

68.基于SpringBoot + Vue实现的前后端分离-心灵治愈交流平台系统(项目 + 论文PPT)

项目介绍 本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述心灵治愈交流平台的当前背景以及系统开发的目的&#xff0c;后续章节将严格按照软件开发流程&#xff0c;对系统进…

Linux(上):基本知识篇

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、Linux初识1 Linux简介2 Linux学习环境配置(1)安装Linux(2)FinalShell远程连接Linux服务器二、Linux基础命令1 Linux目录结构,根目录 /2 Linux命令基础(1)什么是命令、命令行?(2)…

Python中的可变对象与不可变对象;Python中的六大标准数据类型哪些属于可变对象,哪些属于不可变对象

Python中的可变对象与不可变对象&#xff1b;Python中的六大标准数据类型哪些属于可变对象&#xff0c;哪些属于不可变对象 Python中的可变对象与不可变对象一、Python的六大标准数据类型1. 数字类型 (Number)2. 字符串 (String)3. 列表 (List)4. 元组 (Tuple)5. 集合 (Set)6. …

VSCode Live Server 插件安装和使用

VSCode Live Server是一个由Ritwick Dey开发的Visual Studio Code扩展插件&#xff0c;它提供了一个带有实时重载功能的本地开发服务器。在VSCode中安装和使用Live Server插件进行实时预览和调试Web应用程序。这将大大提高前端开发效率&#xff0c;使网页设计和开发变得更为流畅…

Personal APP

1、Matlab 2023b https://www.bilibili.com/opus/887246540317392920 https://blog.csdn.net/qq_25719943/article/details/138096918 https://www.jokerdown.com/22886.html 2、Jlink使用技巧 J-Scope虚拟示波器功能 Jlink使用技巧之J-Scope虚拟示波器功能 - 知乎 (zhihu.…

【马来西亚理工大学主办,ACM出版】2025年大数据、通信技术与计算机应用国际学术会议(BDCTA 2025)

2025年大数据、通信技术与计算机应用国际学术会议&#xff08;BDCTA 2025) 2025 International Conference on Big Data, Communication Technology and Computer Applications 2025年2月14-16日 | 马来西亚-吉隆坡 大会官网&#xff1a;更多详情【论文投稿】 主办单位&…

Sprint Boot教程之五十:Spring Boot JpaRepository 示例

Spring Boot JpaRepository 示例 Spring Boot建立在 Spring 之上&#xff0c;包含 Spring 的所有功能。由于其快速的生产就绪环境&#xff0c;使开发人员能够直接专注于逻辑&#xff0c;而不必费力配置和设置&#xff0c;因此如今它正成为开发人员的最爱。Spring Boot 是一个基…

超完整Docker学习记录,Docker常用命令详解

前言 关于国内拉取不到docker镜像的问题&#xff0c;可以利用Github Action将需要的镜像转存到阿里云私有仓库&#xff0c;然后再通过阿里云私有仓库去拉取就可以了。 参考项目地址&#xff1a;使用Github Action将国外的Docker镜像转存到阿里云私有仓库 一、Docker简介 Do…

左神算法基础巩固--3

文章目录 二叉树二叉树的遍历先序遍历中序遍历后序遍历 解答二叉树的宽度优先遍历 在这里插入图片描述 一颗完全二叉树具有以下特征&#xff1a;1.不存在任何一个节点具有右子树但不存在左子树.2.不存在任何一个节点在满足1的情况下左右子树不全且其后续节点不为叶子节点 根据以…

推动多语言语音科技迈向新高度:INTERSPEECH 2025 ML-SUPERB 2.0 挑战赛

随着语音技术在各领域应用的迅速扩展&#xff0c;全球语言与口音的多样性成为技术进一步突破的重大挑战。为了应对这一难题&#xff0c;来自卡内基梅隆大学&#xff08;CMU&#xff09;、斯坦福大学&#xff08;Stanford University&#xff09;、乔治梅森大学(George Mason Un…

IvorySQL 升级指南:从 3.x 到 4.0 的平滑过渡

日前&#xff0c;IvorySQL 4.0 重磅发布&#xff0c;全面支持 PostgreSQL 17&#xff0c;并且增强了对 Oracle 的兼容性。关于 IvorySQL 4.0 的介绍&#xff0c;各位小伙伴可以通过这篇文章回顾&#xff1a;IvorySQL 4.0 发布&#xff1a;全面支持 PostgreSQL 17. 在 IvorySQL…

flink的EventTime和Watermark

时间机制 Flink中的时间机制主要用在判断是否触发时间窗口window的计算。 在Flink中有三种时间概念&#xff1a;ProcessTime、IngestionTime、EventTime。 ProcessTime&#xff1a;是在数据抵达算子产生的时间&#xff08;Flink默认使用ProcessTime&#xff09; IngestionT…

Windows11环境下设置MySQL8字符集utf8mb4_unicode_ci

1.关闭MySQL8的服务CTRLshiftESC&#xff0c;找到MySQL关闭服务即可 2.找到配置文件路径&#xff08;msi版本默认&#xff09; C:\ProgramData\MySQL\MySQL Server 8.0 3.使用管理员权限编辑my.ini文件并保存 # Other default tuning values # MySQL Server Instance Config…

python学习笔记—14—函数

1. 函数 (1) len与my_len str "supercarrydoinb"def my_len(tmp_str):cnt 0for i in tmp_str:cnt 1return cntstr_len_1 len(str) str_len_2 my_len(str) print(f"len {str_len_1}") print(f"my_len {str_len_2}") (2) 函数传参数量不受…

Flink源码解析之:Flink on k8s 客户端提交任务源码分析

Flink on k8s 客户端提交任务源码分析 当我们需要在代码中提交Flink job到kubernetes上时&#xff0c;需要如何做呢&#xff1f;要引入什么第三方依赖&#xff1f;需要提供什么内容&#xff1f;flink是如何将job提交到k8s上的&#xff1f;经过了什么样的流程&#xff0c;内部有…