Element表格之表头合并、行合并和列合并

el-table合并表头handerMethod_el-table表头合并-CSDN博客

Element表格之表头合并、行合并和列合并_element表格表头合并-CSDN博客

一、合并表头

话不多说,先看效果图:

表格结构如上,其中:header-cell-style对表头做了一些处理。

headFirst({row, colunm, rowIndex, columnIndex}) {if (rowIndex === 1) {//这里为了是将第二列的表头隐藏,就形成了合并表头的效果return {display: 'none'}}return "background:#f5f7fa"
}

二、合并表格行

效果图如

 

 要进行表格合并,关键在于你要对数据渲染的前进行判断处理,在这里,首先要在table中写入:span-method=‘objectSpanMethod’,然后在js部分写上方法。

这里我以第一列为例:

		// 领域合并, courseinit() {// 首先初始化var _this = this;this.courseArr = []this.coursePos = 0for (var i = 0; i < _this.tableData2.length; i++) {//判断是否是第一行if (i === 0) {//导入第一行数据_this.courseArr.push(1)_this.coursePos = 0} else {//不是第一行时,就根据标识去存储,course为我第一行的prop属性的值if (_this.tableData2[i].course === _this.tableData2[i - 1].course) {// 查找到下一行的数据等于上一行的数据时每次要把之前存储的数据+1_this.courseArr[_this.coursePos] += 1_this.courseArr.push(0)} else {// 没有相同的数据时候,要记住当前的index_this.courseArr.push(1)_this.coursePos = i}}}}//然后开始写组件自带的方法,, objectSpanMethod({rowIndex, columnIndex}) {//判断第一列的数据,上下行有没有相同的数据,有则合并,无则保留if (columnIndex === 0) {//courseArr数组是上面输出来的,用来合并表格前做的数据判断const row1 = this.courseArr[rowIndex]const col1 = row1 > 0 ? 1 : 0return {rowspan: row1,colspan: col1}} else  if (columnIndex === 1) {//这里是判断第二列的数据,nameArr和领域合并时候的处理一样,以此类推const row1 = this.nameArr[rowIndex]const col1 = row1 > 0 ? 1 : 0return {rowspan: row1,colspan: col1}}}

用这种方式合并的数据,最好是一条数据渲染一行,才好进行判断上下行的数据要不要进行合并。

三、合并表格列

效果图为:

同样的你只要使用 :span-method="objectSpanMethod2"方法就好了。这里判断的方式就有些不同了。

objectSpanMethod2({row, column, rowIndex, columnIndex}) {// 判断所有数据是否有child属性、且有长度、且其parent_id == 1的数据单元格进行合并if (!(row.child && row.child.length || row.parent_id != '0')) {if (columnIndex === 0) {// 将第一列向右合并一格return [1, 2];} else if (columnIndex === 1) {// 删除第二列return [0, 0];}} else if (columnIndex === 0) {// 对第一列的数据进行行合并const row1 = this.titleArr[rowIndex]const col1 = row1 > 0 ? 1 : 0return {rowspan: row1,colspan: col1}}}

列合并相对于行合并要简单,但是要确定好你要合并哪一行,如果表格是固定的,就轻松多了,只要给对应的那几行进行合并即可。

最后总结一下。

首先你要用rowIndex, columnIndex找到要合并的开始单元格,然后接下来的原理是:

returm {rowspan: 1,colspan: 1}表示表格不变
return (rowspan: 2,colspan: 1}表示表格向下合并一个单元格
return {rowspan: 1,colspan: 2}表示表格向右合并一个单元格
returm (rowspan: 0,colspan: 0}表示删除此单元格

项目中使用element的table表格,总是需要一些自定义的要求,虽然element已经提供了很多方法,但是如何使用还是需要自己探索

先上效果截图


这里主要使用到:header-cell-style="handerMethod"和:span-method="spanMethod"用来合并行和列

主要代码包括:

//隐藏表头handerMethod({ row, column, rowIndex, columnIndex }) {if (row[0].level == 1) {//这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效row[0].colSpan = 0row[1].colSpan = 2if (columnIndex === 0) {return { display: 'none' }}}},//合并列spanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {if (column.property === 'name') {if (rowIndex !== 0) {return { display: 'none' }} else {return { rowspan: 5, colspan: 1 }}} else {return { rowspan: 1, colspan: 1 }}}

这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效 我也是试了很多次才得出这个结论

合并表头代码思路是将两个列通过handerMethod隐藏第一列的同时,让第二列占据两个单元格的宽度来实现合并效果

提供el-table完整代码
<el-table:data="tableData"style="width: 100%":header-cell-style="handerMethod":span-method="spanMethod"height="900"borderrow-class-name="riskList-row"cell-class-name="riskList-cell"header-row-class-name="riskList-headerRow"header-cell-class-name="riskList-headerCell"><el-table-columnprop="name"label="风险等级"width="100":resizable="false"></el-table-column><el-table-columnprop="level"label="风险等级"width="400":resizable="false"></el-table-column><el-table-column label="后果" :resizable="false"><el-table-column label="影响特别重大" width="320" :resizable="false"><template slot-scope="scope"><div class="table_item" :style="customState(scope.row.level_1)">{{ scope.row.level_1 }}</div></template></el-table-column><el-table-column label="影响重大" width="320" :resizable="false"><template slot-scope="scope"><div class="table_item" :style="customState(scope.row.level_2)">{{ scope.row.level_2 }}</div></template></el-table-column><el-table-column label="影响较大" width="320" :resizable="false"><template slot-scope="scope"><div class="table_item" :style="customState(scope.row.level_3)">{{ scope.row.level_3 }}</div></template></el-table-column><el-table-column label="影响一般" width="320" :resizable="false"><template slot-scope="scope"><div class="table_item" :style="customState(scope.row.level_4)">{{ scope.row.level_4 }}</div></template></el-table-column><el-table-column label="影响很小" width="320" :resizable="false"><template slot-scope="scope"><div class="table_item" :style="customState(scope.row.level_5)">{{ scope.row.level_5 }}</div></template></el-table-column></el-table-column></el-table>

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

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

相关文章

HTTPS:安全网络通信的基石

在数字化时代&#xff0c;网络通信的安全变得至关重要。HTTPS&#xff08;超文本传输安全协议&#xff09;是一种用于保护网络通信的协议&#xff0c;它通过加密技术确保数据传输的安全性和完整性。下面我们就来了解一下HTTPS。 一、HTTPS是什么&#xff1f; HTTPS是HTTP&…

求多个数的最大公约数及比例化简

目录 求多个数的最大公约数及比例化简代码功能概述主要步骤代码详解1. 求两个数的最大公约数2. 求多个数的最大公约数3. 应用示例 示例与应用博客总结 求多个数的最大公约数及比例化简 代码功能概述 这段代码的目的是求多个数的最大公约数&#xff08;GCD&#xff09;&#x…

【el-table 实现自定义单选】

el-table 实现自定义单选 示例图片代码 示例图片 代码 row-click"singleElection"<el-table-columnalign"center"label"选择"><template slot-scope"scope"><el-radio:key"scope.row.id"v-model"templa…

ChannelHandlerContext——ChannelHandler和ChannelPipeline之二

目录 ChannelHandlerContext接口 使用ChannelHandlerContext ChannelHandler和ChannelHandlerContext的高级用法 异常处理 处理入站异常 处理出站异常 本文继上文《ChannelHandler和ChannelPipeline之一》&#xff0c;接着讲ChannelHandlerContext接口。 ChannelHandlerC…

LeetCode hot100-51-G

200. 岛屿数量 给你一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。此外&#xff0c;你可以假设该网…

Python 全栈体系【四阶】(五十)

第五章 深度学习 十一、扩散模型 4. 附录&#xff1a;Diffusion的数学推导过程 4.2 Diffusion正向扩散过程推导 设初始数据 x 0 x_0 x0​符合分布 q ( x 0 ) q(x_0) q(x0​)&#xff0c;即训练集分布&#xff0c;然后不断向其中添加高斯噪声&#xff0c;高斯噪声本身是不可…

需求响应+配网重构!含高比例新能源和用户需求响应的配电网重构程序代码!

前言 配电网重构作为配电网优化运行的手段之一&#xff0c;通过改变配电网的拓扑结构&#xff0c;以达到降低网损、改善电压分布、提升系统的可靠性与经济性等目的。近年来&#xff0c;随着全球能源消耗快速增长以及环境的日趋恶化&#xff0c;清洁能源飞速发展&#xff0c;分…

超简单白话文机器学习 - 逐步回归Lasso,Ridge正则化(含算法讲解,公式全解,手写代码实现,调包实现)

1. 提高泛化能力 1.1 概念 正则化是一种在机器学习和统计建模中用于防止过拟合的技术。过拟合是指模型在训练数据上表现很好&#xff0c;但在未见过的测试数据或新数据上表现不佳。正则化通过在损失函数&#xff08;如最小二乘误差&#xff09;中添加一个惩罚项&#xff0c;限…

【Spring】Spring事务管理

1. 事务的基本概念 1.1简介 数据库事务是指作为单个逻辑工作单元执行的一系列操作&#xff0c;要么完全地执行&#xff0c;要么完全地不执行。Spring的事务管理主要基于AOP&#xff08;面向切面编程&#xff09;技术&#xff0c;通过声明式或编程式的方式来实现。Spring框架内…

仓库管理WMS软件(Warehouse Management Software)百科解析

一、什么是仓库管理软件&#xff08;WMS&#xff09;&#xff1f; 仓库管理软件&#xff08;WMS&#xff09;全称Warehouse Management System&#xff0c;是一种专门用于仓库作业流程优化和库存控制的软件系统。它通过先进的自动识别与数据采集技术&#xff0c;实现对仓库货物…

Leecode热题100---114:二叉树展开为链表

题目&#xff1a; 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。 展开后的单链表应该与二叉树 先序遍历 顺序相同…

SCSS基本使用

SCSS&#xff08;Sassy CSS&#xff09;是一种 CSS 预处理器&#xff0c;它是 CSS 语言的一个扩展&#xff0c;增加了变量、嵌套规则、混合&#xff08;mixins&#xff09;、函数等功能&#xff0c;使得编写 CSS 更加高效和易于维护。SCSS 代码最终会被编译成标准的 CSS 代码。…

Lambda表达式使用及详解

Java 8引入的Lambda表达式是一种重要的功能&#xff0c;它允许你以更简洁、更直接的方式传递方法。Lambda可以被用来代替只有单个抽象方法的接口的匿名实现类。这里有一些Lambda表达式的实际应用场景及其示例&#xff1a; 1. 集合操作 在处理集合时&#xff0c;如List或Set&a…

Oracle数据库中的PCTFREE解析

PCTFREE是Oracle数据库中用于表或索引段空间管理的一个重要存储参数。这个参数定义了一个数据块中保留的最小空闲空间百分比&#xff0c;旨在为现有行的未来更新预留空间。具体来说&#xff1a; 当设置一个数据块的PCTFREE值时&#xff0c;你实际上是告诉Oracle在这个数据块填满…

Spring Boot | Spring Boot 实现 “记住我“ 功能

目录: 一、SpringBoot 中 自定义 "用户授权管理" ( 总体内容介绍 )二、实现 "记住我" 功能 ( 通过 "HttpSecurity类" 的 rememberMe( )方法来实现 "记住我" 功能 ) :2.1 基于 "简单加密 Token" 的方式 ( 实现 "记住我&…

av_dump_format经验分析,FFmpeg获取媒体文件总时长(FLV获取总时长的误区)

播放器有个功能&#xff0c;当用户打开视频时&#xff0c;需要读取媒体文件的总时长等信息&#xff0c;不巧的时&#xff0c;获取FLV时总失败&#xff0c;下面来具体分析下FLV和MP4获取总时长的原因和区别&#xff1a; 播放器有个获取MediaInfo的接口&#xff0c;功能如下&am…

python web自动化(关键字驱动与POM)

1.关键字驱动解析 所谓的关键字驱动&#xff0c;本质就是函数封装的过程。 ⾃动化当中的封装⽬的是&#xff1a;拆分重复的⾏为代码和测试数据&#xff0c;增加可维护性和复⽤性 我们想要定义一个工具类 # 定义工具类&#xff08;基于基础的方法&#xff0c;进行的关键…

echarts全局设置饼图的颜色

&#x1f337;第一步 在js文件中写入你需要的颜色 这里的颜色也可以写渐变的 &#x1f337;下一步 在main.is中引用全局挂载 &#x1f337;最后一步 在初始化的时候加一个macarons即可 &#x1f337;第一步 在js文件中写入你需要的颜色 这里的颜色也可以写渐变的 (functi…

探索k8s集群中kubectl的陈述式资源管理

一、k8s集群资源管理方式分类 1.1陈述式资源管理方式&#xff1a;增删查比较方便&#xff0c;但是改非常不方便 使用一条kubectl命令和参数选项来实现资源对象管理操作 即通过命令的方式来实 1.2声明式资源管理方式&#xff1a;yaml文件管理 使用yaml配置文件或者json配置文…

【研发日记】嵌入式处理器技能解锁(一)——多任务异步执行调度的三种方法

文章目录 前言 Timer中断调度 Event中断调度 StateFlow调度 分析和应用 总结 参考资料 前言 近期在一些嵌入式系统开发项目中&#xff0c;在使用嵌入式处理器时&#xff0c;遇到了挺多费时费力的事情。所以利用晚上和周末时间&#xff0c;在这些方面深入研究了一下&…