el-table中合并垂直方向的单元格

embedded/2024/12/26 3:25:25/

el-table中合并垂直方向的单元格

  • 一、合并垂直方向单元格,有相同字段的合并一起

在这里插入图片描述

一、合并垂直方向单元格,有相同字段的合并一起

合并一起的都有相同的字段mergeType

javascript">      <el-tableclass="merge-table":data="tableData"v-loading="isLoading":span-method="spanMethod"element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)"size="mini"empty-text="暂无数据":stripe="true"borderstyle="width: 100%"></el-table>spanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0 ||columnIndex === 1 ||columnIndex === 2 ||columnIndex === 3 ||columnIndex === 4 ||columnIndex === 5 ||columnIndex === 6 ||columnIndex === 7) {// 缓存通过筛选条件得到的数组,避免重复计算const tempArr = this.tableData.filter(b => b.mergeType === row.mergeType);const isFirstRow =rowIndex === this.tableData.findIndex(item => item.mergeType === row.mergeType);if (isFirstRow) {return {rowspan: tempArr.length,colspan: 1,};} else {return {rowspan: 0,colspan: 0,};}} else {return {rowspan: 1,colspan: 1,};}},

http://www.ppmy.cn/embedded/148789.html

相关文章

【kubernetes】资源管理方式

目录 1. 说明2. 命令式对象管理3. 命令式对象配置4. 声明式对象配置5. 三种方式的对比 1. 说明 1.在Kubernetes&#xff08;k8s&#xff09;中&#xff0c;资源管理是一个核心功能&#xff0c;它允许用户通过操作资源来管理Kubernetes集群。2.Kubernetes将所有的内容都抽象为资…

【多维DP】力扣576. 出界的路径数

给你一个大小为 m x n 的网格和一个球。球的起始坐标为 [startRow, startColumn] 。你可以将球移到在四个方向上相邻的单元格内&#xff08;可以穿过网格边界到达网格之外&#xff09;。你 最多 可以移动 maxMove 次球。 给你五个整数 m、n、maxMove、startRow 以及 startColu…

C++的侵入式链表

非侵入式链表 非侵入式链表是一种链表数据结构&#xff0c;其中每个元素&#xff08;节点&#xff09;并不需要自己包含指向前后节点的指针。链表的结构和节点的存储是分开的&#xff0c;链表容器会单独管理这些指针。 常见的非侵入式链表节点可以由以下所示&#xff0c;即&a…

[Python] 圆形嵌套图Circular Packing

在Python中&#xff0c;生成圆形嵌套图&#xff08;Circular Packing&#xff09;通常涉及使用图形库或可视化工具来绘制一系列嵌套的圆形&#xff0c;这些圆形可能代表某种层次结构或数据分布。一个流行的选择是使用 matplotlib 库&#xff0c;它是Python中一个广泛使用的绘图…

iClient3D for Cesium在Vue中快速实现场景卷帘

作者&#xff1a;gaogy 1、背景 iClient3D for Cesium是由SuperMap提供的一个前端3D地图客户端&#xff0c;提供了丰富的功能与接口&#xff0c;使得开发者能够在Web应用中快速集成并展现3D地理信息。而在Vue框架中集成iClient3D&#xff0c;不仅可以利用Vue的响应式特性提高开…

lxml提取某个外层标签里的所有文本

html如下 <div data-v-1cf6f280"" class"analysis-content">选项D错误&#xff1a;<strong>在衡量通货膨胀时&#xff0c;</strong><strong>消费者物价指数使用得最多、最普遍</strong>。 </div> 解析html文本 fro…

Word表格批量添加题注代码

操作步骤 打开word&#xff0c;点击“开发工具”&#xff0c;进入Visual Basic&#xff0c;点击“Normal”,右键&#xff0c;插入“模块”。输入代码如下&#xff1a; Sub 批量添加表格题注() For i 1 To ActiveDocument.Tables.CountActiveDocument.Tables(i).Range.Insert…

SpringMVC的URL组成,以及URI中对/斜杠的处理,解决IllegalStateException: Ambiguous mapping

SpringMVC的URL组成 ip 端口号 上下文 类上的RequestMapping的URI 方法上的RequestMapping的URI 规则 非空URI前会自动拼接/连续的斜杠会被替换成单个斜杠方法的URI前没有斜杠与只有一个斜杠的两种接口&#xff0c;同时存在时&#xff0c;拼接前面的斜杠后再替换重复斜杠&…