element-ui表格多级表头固定列和合并单元格

devtools/2024/12/28 9:02:07/

多级表头固定列

代码示例-不能直接运行,仅供参考

<el-table ref="table" class="table":data="list"style="width: 100%":header-cell-style="headerCellStyle"v-loading="dataLoading":span-method="spanMethod"><el-table-column v-for="(item, index) in tableHeader" :label="item.name" :key="index" :fixed="item.fixed":min-width="item.width"><el-table-column v-for="(head,j) in item.header" :label="head.label" :key="j+'ii'":fixed="head.fixed":prop="head.id":min-width="head.minW":class-name="setClass(head.id)"></el-table-column></el-table-column>
</el-table>需要在修改样式-避免固定列数据空白情况
<style lang="less" scoped>
.table {/deep/.el-table__cell.is-hidden>*{//多级表头固定列-样式修改visibility: visible;}
}
</style>

合并单元格

如图,下列方法实现的是图中的合并单元格的方式方法

function spanMethod({ row, column, rowIndex, columnIndex }) {let arr = [0, 1, 2, 4, 12, 13, 14, 15, 16, 17,18,19,20,21];//需要合并的列let spArr = [5, 22, 23, 24, 25, 26, 27];//需要合并的列if (arr.indexOf(columnIndex)>-1) {if (row.rowspan) {return {rowspan: row.rowspan,//合并多少行数据colspan: 1};} else {return {rowspan: 0,colspan: 0};}}else if (spArr.indexOf(columnIndex) > -1) {if (row.spRowspan) {return {rowspan: row.spRowspan,colspan: 1};} else {if (!row.mcId) {//避免不合并的行,缺少数据,导致没有边框return {rowspan: 1,colspan: 1}; } else {return {rowspan: 0,colspan: 0}; }}}},


http://www.ppmy.cn/devtools/146065.html

相关文章

docker-compose相关命令

背景 最近在使用docker进行模型环境的部署, 可以很快稳定的保持环境进行迁移, 为了更好的管理模型所需要的环境, docker-compose.yaml文件是不错的选择 相关命令 docker - compose up 功能&#xff1a;用于启动docker - compose.yml文件中定义的所有服务容器。它会读取配置文…

第52天小迪安全(暴力破解)

目录 思维带图 前言&#xff1a; 学习 思路&#xff1a; mysql数据库默认root用户不允许外联 然后linux系统连的是ssh协议 windows系统连的是rdp协议验证码识别插件&#xff0c;识别率低&#xff0c;原因懒总结&#xff0c;需要自己输入密码的&#xff0c;都可以尝试暴力破…

python中Windows系统使用 pywin32 来复制图像到剪贴板,并使用 Selenium 模拟 Ctrl+V 操作

步骤 1&#xff1a;安装必要的库 首先&#xff0c;安装 pywin32 和 selenium&#xff1a; pip install pywin32 selenium 如果使用的是 macOS&#xff0c;可以安装 pyobjc&#xff1a; pip install pyobjc 步骤 2&#xff1a;使用 pywin32 复制图像到剪贴板 在 Windows 系统中…

Mono里运行C#脚本7—MonoImageStorage结构解析

Mono里运行C#脚本7—MonoImageStorage结构解析 定义一个结构来保存EXE文件加载到内存的表示。 typedef struct { MonoRefCount ref; //引用计数,如果这个文件引用计数为0就可以删除。 /* key used for lookups. owned by this image storage. */ char *key; //HASH…

Kafka数据迁移全解析:同集群和跨集群

文章目录 一、同集群迁移二、跨集群迁移 Kafka两种迁移场景&#xff0c;分别是同集群数据迁移、跨集群数据迁移。 一、同集群迁移 应用场景&#xff1a; broker 迁移 主要使用的场景是broker 上线,下线,或者扩容等.基于同一套zookeeper的操作。 实践&#xff1a; 将需要新添加…

学习ASP.NET Core的身份认证(基于JwtBearer的身份认证4)

本文学习并记录builder.Services.AddAuthentication().AddJwtBearer函数中配置类的主要属性及用途。AddJwtBearer函数原型如下图所示&#xff0c;划红线的为常用形式&#xff0c;主要设置JwtBearerOptions类型的常用属性或事件。   JwtBearerOptions类中的属性虽多&#xff0…

Text2SQL(NL2sql)对话数据库:设计、实现细节与挑战

Text2SQL&#xff08;NL2sql&#xff09;对话数据库&#xff1a;设计、实现细节与挑战 前言 1.何为Text2SQL&#xff08;NL2sql&#xff09;2.Text2SQL结构与挑战3.金融领域实际业务场景4.注意事项5.总结 前言 随着信息技术的迅猛发展&#xff0c;人机交互的方式也在不断演…

探秘 Chrome 隐藏配置项:chrome://net-internals

Chrome浏览器中的chrome://net-internals/页面是一个强大的内置工具&#xff0c;提供了监视和调试网络请求与事件的详细功能。 一、chrome://net-internals/#events 地址&#xff1a;chrome://net-internals/#events 这个页面用于监视和调试网络请求和事件。通过它&#xff…