vxe-vxeTable使用vxe-colgroup分组合并表头,基础上合并

1.例

vxe-colgroup分组完成,需要实现两个合并合并成一行

基础合并完成

2.实现思路 

        由于表头字段固定,在进行vxe-colgroup分组合并,实现基础的表头合并;组件库官网对于表头合并并没有方法;

1.官网API知可以给对应的表头单元格2添加类名;

header-class-name="custom-span"

2. 单元格1不添加title表明提示,处于空的状态;

3.通过定位的方式与/deep/穿透文字对应的样式,进行绝对定位,定位到合并对应的位置;

本质上单元格没有进行合并,只是通过定位以及文字区域的背景颜色设置一样覆盖,给用户视觉上产生两个单元格已经合并了的错觉;

3.代码

html

<vxe-column field="key" title="收入" min-width="100" align="center"></vxe-column><vxe-colgroup><vxe-colgroup align="center" title="合并" header-class-name="custom-span"><vxe-colgroup title="one" field="expendType" align="center" min-width="100"><vxe-colgroup title="two" field="expendType" align="center" min-width="100"><vxe-column title="three" field="expendType" min-width="100" align="center"></vxe-column></vxe-colgroup></vxe-colgroup></vxe-colgroup></vxe-colgroup>
<vxe-colgroup title="year" align="center"><vxe-colgroup align="center" field="sex" title="合计" min-width="100"><vxe-colgroup align="center" field="num" title="42" min-width="100"><vxe-colgroup align="center" field="num" title="0" min-width="100"><vxe-column align="center" field="num" title="0" min-width="100"></vxe-column></vxe-colgroup></vxe-colgroup></vxe-colgroup><vxe-colgroup align="center" :title="item.date" :field="item.date" v-for="item in monthDataTable" :key="item.date" height="30" min-width="80"><vxe-colgroup align="center" field="num" title="0" min-width="100"><vxe-colgroup align="center" field="num" title="0" min-width="100"><vxe-column align="center" field="num" title="0" min-width="100"></vxe-column></vxe-colgroup></vxe-colgroup></vxe-colgroup>

script

 // 月的默认数据monthDataTable: [{date: "M1", },{date: "M2",},{date: "M3",},{date: "M4",},],

css定位

<style scoped lang="less">
/deep/.vxe-header--row{height: 35px !important;padding:0 !important;
}
// 表格单元格高度
/deep/.vxe-body--column{height: 35px !important;
}
/deep/.custom-span .vxe-cell .vxe-cell--title{width: 99% !important;position: absolute !important;background-color: rgb(244, 246, 251) !important;bottom: 38px !important;left: 0 !important;
}
</style>

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

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

相关文章

新能源电燃灶:变革与优势

在当今社会&#xff0c;能源问题日益凸显&#xff0c;能源危机成为了全球关注的焦点。而在厨房领域&#xff0c;一种名为新能源电燃灶的产品正逐渐走进人们的视野&#xff0c;以华火电燃灶为例&#xff0c;它展现出了令人瞩目的特点和潜力。 随着传统能源的逐渐枯竭和环境压力的…

智芯开发板----环境配置

一、软件准备 Keil IDE/ IAR IdeSupport_Install_Package已经上传到资源中自行下载即可。 二、IAR环境配置 1.首先将IdeSupport_Install_Package内的IAR文件复制到你的IAR安装路径中如图所示&#xff1a; 2.按如图所示的路径进行复制即可 3.以记事本的方式打开这个xml文件…

零基础STM32单片机编程入门(四)ADC详解及实战含源码视频

文章目录 一.概要二.STM32F103C8T6单片机ADC外设特点三.STM32单片机ADC内部结构图1.ADC相关引脚说明2.ADC通道分类3.触发源4.转换周期5.电压转换计算6.更精确电压转换计算 四.规则通道ADC采集信号流向1.单次转换模式2.连续转换模式 五.CubeMX配置一个ADC采集例程六.CubeMX工程源…

大厂程序员上班猝死成常态?

大家好&#xff0c;我是瑶琴呀&#xff0c;拥有一头黑长直秀发的女程序员。 近日&#xff0c;连续看到大厂程序员猝死、低血糖晕倒的新闻&#xff0c;同为程序员感到很难受。互联网加班成常态这是既定事实&#xff0c;尤其在这个内卷严重、经济不景气的环境中&#xff0c;加班…

【漏洞复现】电信网关配置管理系统——命令执行

声明&#xff1a;本文档或演示材料仅供教育和教学目的使用&#xff0c;任何个人或组织使用本文档中的信息进行非法活动&#xff0c;均与本文档的作者或发布者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 电信网关配置管理系统是一个用于管理和配置电信网关设备的软件系…

高性能Web服务器-Nginx的常用模块

文章目录 Nginx安装Nginx平滑升级与回滚平滑升级流程第1步&#xff0c;下载新版本第2步&#xff0c;编译第3步&#xff0c;执行make第4步&#xff0c;对比新旧版本第5步&#xff0c;备份旧nginx二进制文件第6步&#xff0c;模拟用户正在访问nginx第7步&#xff0c;替换旧的ngin…

【资源】太绝了!整整16本Python必看书籍详细讲解,适合零基础小白,高清电子版PDF开放下载,带你从入门到入土~

小编为初学Python的朋友们汇总了16本零基础入门书籍&#xff0c;包括Python三剑客等&#xff0c;都是在编程届多年畅销的书籍&#xff0c;也是众多从业者的选择&#xff0c;全文详细介绍了书籍主要内容&#xff0c;有需要的宝子根据自身情况自取 【教程领取方式在文末&#xff…

基于weixin小程序农场驿站系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;农场资讯管理&#xff0c;用户管理&#xff0c;卖家管理&#xff0c;用户分享管理&#xff0c;分享类型管理&#xff0c;商品信息管理&#xff0c;商品类型管理 开发系统&#xff1a;Windows 架构模式…

「性能指标」CPU飙高排查实战

上篇提到了什么是 CPU 以及如何计算的。接下来主要说说实际工作中遇到 CPU 飙高如何去排查呢&#xff1f; 往期回顾&#xff1a; 聊聊性能指标 CPU 利用率如何计算的&#xff1f; 问题发现 前段时间我们新上线了一个应用&#xff0c;由于流量一直不大&#xff0c;集群的每秒…

力扣 单链表元素删除解析及高频面试题

目录 删除元素的万能方法 构造虚拟头结点来应对删除链表头结点的情况 一、203.移除链表元素 题目 题解 二、19.删除链表中倒数第K个节点 题目 题解 三、 83.删除某个升序链表中的重复元素&#xff0c;使重复的元素都只出现一次 题目 题解 82.删除某个升序链表中的…

2023年第十四届蓝桥杯JavaB组省赛真题及全部解析(下)

承接上文&#xff1a;2023年第十四届蓝桥杯JavaB组省赛真题及全部解析&#xff08;下&#xff09;。 目录 七、试题 G&#xff1a;买二赠一 八、试题 H&#xff1a;合并石子 九、试题 I&#xff1a;最大开支 十、试题 J&#xff1a;魔法阵 题目来自&#xff1a;蓝桥杯官网…

【星海随笔】vue+vite

开头问一个问题&#xff0c;我发现有的人粉丝是点赞数的好几倍&#xff0c;可能和必须关注他才能阅读他的文章有关。 所以问一下怎么设置为关注才能查看该文章。 screen -ls #查看 id 列表 screen -S <session_name> # 创建一个会话 screen -R <session_id> # 根据…

iconfont-阿里巴巴矢量图标库 在vue项目使用记录

官网地址&#xff1a;https://www.iconfont.cn/manage/index?manage_typemyprojects&projectId4539761 第一步&#xff1a; 下载资源 ->解压到项目文件夹 第二步 在项目中main.ts 或者main.js 引入资源 import //assets/iconfont/font/iconfont.js; import //assets…

IBM Spectrum LSF RTM,针对 IBM Spectrum LSF 环境的高级报告、跟踪和监控工具

亮点 为 IBM Spectrum LSF 环境提供性能监控和报告 监控 FlexNet Publisher 和 Reprisebased 许可证的使用&#xff0c;提供详细和总结性报告 通过多个级别&#xff08;包括应用程序和组织&#xff09;的报告来监控共享存储的利用率 提供强大的生产力工具&#xff0c;包括操…

JVM专题五:类加载器与双亲委派机制

通过上一篇Java的类加载机制相信大家已经搞明白了整个类加载从触发时机&#xff0c;接着我们就来看下类加载器&#xff0c;因为类加载机制是有加载器实现的。 类加载器的分类 启动类加载器 Bootstrap ClassLoader 是 Java 虚拟机&#xff08;JVM&#xff09;的一部分&#x…

斜光测距的原理及python实现

1.前言 最近做了一个基于opencv的斜光测距的小项目&#xff0c;东西不多&#xff0c;但是很有意思&#xff0c;值得拿出来学一学。项目里面需要比较精确的定位功能&#xff0c;将前人matlab代码移植到python上&#xff0c;并且做了一些优化&#xff0c;简化逻辑(毕竟我是专业的…

我教会了我妈搭建自己的 AI 聊天机器人...

在这个人工智能爆发的年代,ChatGPT、Claude、Kimi、文心一言等 AI 大模型产品火遍全网,仿佛一夜之间,人人都在谈论 AI。 作为普通人的我们,难道就只能看着程序员们尽情玩耍,自己却无法参与其中吗?NO! 鉴于最近自己社群学员和粉丝的要求&#xff0c;一进来大家无论是不是小白…

Linux防火墙【SNAT,DNAT】

NAT: 支持PREROUTING&#xff0c;INPUT&#xff0c;OUTPUT&#xff0c;POSTROUTING四个链 请求报文&#xff1a;修改源/目标IP&#xff0c; 响应报文&#xff1a;修改源/目标IP&#xff0c;根据跟踪机制自动实现 NAT的实现分为下面类型&#xff1a; SNAT&#xff1a;source…

如何实现数字人系统私有化部署?数字人源码部署教程简易版来了!

当前&#xff0c;数字人行业的市场前景和应用潜力不断显现&#xff0c;不少创业者都想要通过学习数字人源码部署教程来搭建属于自己的数字人系统&#xff0c;以此获得进军数字人行业的入场券。而事实上&#xff0c;该想法本身当然是固然值得鼓励的&#xff0c;但就目前的实践情…

基于改进天鹰优化算法(IAO)优化RBF神经网络数据回归预测 (IAO-RBF)的数据回归预测(多输入多输出)

改进天鹰优化算法(IAO)见&#xff1a;【智能优化算法】改进的AO算法(IAO)-CSDN博客 代码原理 基于改进天鹰优化算法&#xff08;IAO&#xff09;优化RBF神经网络数据回归预测&#xff08;IAO-RBF&#xff09;的多输入多输出&#xff08;MIMO&#xff09;数据回归预测&#xf…