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

news2024/12/23 20:06:27

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.coloradmin.cn/o/1872952.html

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

相关文章

炫云云渲染c4d使用教程

c4d是一款功能强大的三维建模、动画和渲染软件&#xff0c;在电影、电视和广告行业中被广泛应用于视觉效果制作&#xff0c;是一款非常受欢迎的三维设计软件&#xff0c;而后期的渲染往往又非常费时间。本文为大家介绍炫云云渲染的使用方法&#xff0c;能极大提升你的渲染效率和…

为什么ISO 45001职业健康安全管理体系是企业发展的基石

ISO 45001源自OHSAS 18001职业健康和安全管理体系&#xff0c;是全球第一个国际职业健康和安全管理标准。ISO&#xff08;国际标准化组织&#xff09;于2018年发布了这一标准&#xff0c;旨在帮助各类组织为员工提供一个更安全、更健康的工作环境。与OHSAS 18001相比&#xff0…

亚马逊测评干货分享:跨境卖家店铺测评技巧

测评在亚马逊、etsy、temu、速卖通、vinted、ebay、allegro、Jumia、Fruugo、敦煌、shopee、ozon、阿里国际站、沃尔玛、newegg等跨境平台中扮起着重要的方式&#xff0c;卖家们了解到测评可以快速增加产品的销量、评论数量&#xff0c;提升排名&#xff0c;从而打造爆款产品。…

python办公自动化之excel

用到的库&#xff1a;openpyxl 实现效果&#xff1a;读取单元格的值&#xff0c;写入单元格 代码&#xff1a; import openpyxl # 打开现有工作簿 workbookopenpyxl.load_workbook(现有工作簿.xlsx) # 选择一个工作表 sheetworkbook[交易表] # 读取单元格的值 cell_valueshe…

用数组模拟栈实现递归函数模拟

做算法课设时候看到题目要求模拟函数递归时候栈的入栈出栈过程。本来想着直接调用系统递归函数即可&#xff0c;可是发现系统函数栈的空间非常小大约只有3000层&#xff0c;很容易爆栈。于是便有了用栈去模拟递归函数的想法&#xff0c;但是上网查了下貌似相关代码比较少&#…

【网络安全学习】漏洞利用:BurpSuite的使用-02-常用的标签

下面介绍一下BurpSuite各个标签的用法&#x1f447; 1️⃣ Dashboard标签 Dashboard&#xff0c;顾名思义就是BurpSuite的仪表盘&#xff0c;可以通过Dashboard进行漏洞扫描&#xff0c;不过该功能需要升级到pro版本&#xff0c;也就是得交钱&#x1f62d;。 2️⃣ Target标签…

STM32要学到什么程度才算合格?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; STM32 这玩意儿要学到啥…

CDN入门

在腾讯云上使用CDN 1、参考 内容分发网络 CDN 从零开始配置 CDN-快速入门-文档中心-腾讯云 2、验证 访问&#xff1a; 登录 - 腾讯云 Window10本地电脑使用命令验证 nslookup -qt-cname hmblogs.com.cn Ubuntu下验证 dig hmblogs.com.cn

【等保小知识】政府机构哪些系统需要过等保?怎么过?

随着等保政策的严格落地执行&#xff0c;政府机构率先做榜样&#xff0c;积极办理等保。那你知道政府机构到底哪些系统需要过等保吗&#xff1f;这里我们小编就来给大家简单回答一下&#xff0c;仅供参考哈&#xff01; 政府机构哪些系统需要过等保&#xff1f; 【回答】&…

docker部署EKF

1.检查版本 检查当前系统的docker版本 [rootnode1 ~]# docker version Client: Docker Engine - CommunityVersion: 20.10.12API version: 1.41Go version: go1.16.12Git commit: e91ed57Built: Mon Dec 13 11:45:41 2021OS/Arch: …

基于SpringBoot养老院管理系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f;感兴趣的可以先收藏起来&#xff0c;还…

SpringBoot集成道历(实现道历日期查询)

官网地址&#xff1a;官网地址https://6tail.cn/calendar/api.html 1、导入依赖 <dependency><groupId>cn.6tail</groupId><artifactId>lunar</artifactId><version>1.3.9</version></dependency><dependency><group…

未来先行!MWC 2024 世界移动通信大会盛大开幕!!!

2024MWC上海世界移动通信大会&#xff0c;在上海新国际博览中心&#xff08;SNIEC&#xff09;盛大开幕。 今年&#xff0c;MWC的主办方GSMA&#xff08;全球移动通信系统协会&#xff09;为这届MWC定下了一个主题——“Future First&#xff08;未来先行&#xff09;”。各大…

定制聚四氟乙烯架子离心管架子消解管样品架

南京瑞尼克定制离心管架子、消解管架子、微波罐架子等&#xff0c;各种实验室所需器皿样品架。 我司聚四氟乙烯架子优势&#xff1a; 1.耐强腐蚀&#xff08;耐各种强酸强碱和有机溶剂&#xff09; 2.耐高低温&#xff1a;-200至250℃ 3.工艺精制&#xff0c;尺寸&#xff0…

【代码随想录】【算法训练营】【第52天】 [647]回文子串 [516]最长回文子序列

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 52&#xff0c;周五&#xff0c;开始补作业了~ 题目详情 [647] 回文子串 题目描述 647 回文子串 解题思路 前提&#xff1a; 思路&#xff1a; 重点&#xff1a; 代码实现 C语言 [516] 最…

Davtest一键远程编辑远程Web服务器上的文件(KALI工具系列三十三)

目录 1、KALI LINUX 简介 2、Davtest 工具简介 3、信息收集 3.1 目标IP&#xff08;服务器) 3.2 kali的IP 4、操作实例 4.1 常见漏洞扫描 4.2 身份验证 4.3 特定扫描 4.4 输出结果 5、总结 1、KALI LINUX 简介 Kali Linux 是一个功能强大、多才多艺的 Linux 发行版 &…

【笔记】echarts图表的缩放和鼠标滚动冲突的处理解决方案

解决方案不是很好&#xff0c;来源于github的issue&#xff0c;官方提供了&#xff0c;组合键触发缩放的功能。 https://github.com/apache/echarts/issues/5769 https://echarts.apache.org/zh/option.html#dataZoom-inside.zoomOnMouseWheel dataZoom-inside.zoomOnMouseWhe…

一文让你简单明了的知道云管理平台的作用

随着云计算的飞速发展&#xff0c;越来越多的企业实现了上云。因此云管理平台也在云计算环境中扮演着至关重要的角色&#xff0c;在企业上云后充分发挥作用。今天我们小编就来为大家简单讲解一下云管平台的作用。 一文让你简单明了的知道云管理平台的作用 作用1、提高工作效率…

Window.Notification API详细使用指南

在访问CSDN网站时,就会弹出窗口提示是否允许接收通知,刚开始以为是什么高深的技术,后来了解到是HTML5的一个通知特性. 基本定义 window.Notification 是Web API的一部分&#xff0c;它允许网页或应用程序向用户发送桌面通知。这些通知可以包含图像、文本和声音&#xff0c;以…

Idea 插件 Convert YAML and Properties File

YAML 和 Properties 相互转换插件 ConvertYamlAndProperties: IntelliJ IDEA plugin - Convert Yaml And Properties Files