el-table合并单元格
el-tabel数据结构
此处为this.rolePermitItemList

合并后的样式:

el-table-column 需要添加property字段,属性值同props,用来判断需要合并的字段
<el-table :data="rolePermitItemList" style="width: calc(100% );margin-top:10px; "max-height="550" border ref="tableBoxTwo" :span-method="arraySpanMethod"><el-table-column :label="item.name" v-for="(item) in tableFieldTwo" :key="item.value":width="item.width" :align="item.align" :property="item.value"><template slot="header"><div><span class="name">{{ item.name }}</span><span class="unit">{{ item.unit ? '(' + item.unit + ')' : '' }}</span></div></template><template slot-scope="scope"><span style="font-size: 14px;font-family: MicrosoftYaHei;color: #4D4C4F;">{{scope.row[item.value]|| '-'}}</span></template></el-table-column><el-table-column align="left" :property="'peizhi'"><template slot="header"><div style="display: flex;align-items: center;justify-content: center;"><span class="name">权限</span></div></template><template slot-scope="scope"><div class="flex-row-nowrap flex-justify-space-around"><el-checkbox v-model="scope.row.checked"@change="checkboxChange(scope.row, 'two')" :data-a="responsive">{{scope.row.operateName }}</el-checkbox></div></template></el-table-column></el-table>
//方法data(){return{mergeObj: {}, // 用来记录需要合并行的下标mergeArr: ['moduleName', 'pageName',], // 表格中的列名tableFieldTwo: [{name: "模块",unit: "",value: "moduleName",isNumber: false,},{name: "页面",unit: "",value: "pageName",isNumber: false,},{name: "子页面",unit: "",value: "childPageName",isNumber: false,},],}},getRolePermitItemList(roleId = '') {this.$api.getRolePermitItemList({ roleId: roleId }).then(res => {if (res.code = 200) {this.rolePermitItemList = res.datathis.rolePermitItemList.forEach(item => {item.checked = item.isChecked ? true : false})//拿到数据后调用getSpanArr,数据结构为el-table正常的listthis.getSpanArr(this.rolePermitItemList);}})},getSpanArr(data) {this.mergeArr.forEach((key, index1) => {let count = 0; // 用来记录需要合并行的起始位置this.mergeObj[key] = []; // 记录每一列的合并信息data.forEach((item, index) => {// index == 0表示数据为第一行,直接 push 一个 1if (index === 0) {this.mergeObj[key].push(1);} else {// 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位if (item[key] === data[index - 1][key]) {this.mergeObj[key][count] += 1;this.mergeObj[key].push(0);} else {// 如果当前行和上一行其值不相等 count = index; // 记录当前位置 this.mergeObj[key].push(1); // 重新push 一个 1}}})})// this.mergeObj.peizhi= this.mergeObj.moduleNameconsole.log('mergeObj', this.mergeObj,this.mergeArr)},arraySpanMethod({ row, column, rowIndex, columnIndex }) {// 判断列的属性if (this.mergeArr.indexOf(column.property) !== -1) {// 判断其值是不是为0 if (this.mergeObj[column.property][rowIndex]) {return [this.mergeObj[column.property][rowIndex], 1]} else {// 如果为0则为需要合并的行return [0, 0];}}},
相关文章:
el-table合并单元格
el-tabel数据结构 此处为this.rolePermitItemList 合并后的样式: el-table-column 需要添加property字段,属性值同props,用来判断需要合并的字段 <el-table :data"rolePermitItemList" style"width: calc(100% );margi…...
html5设置不缓存
<meta http-equiv"Cache-Control" content"no-cache, no-store, must-revalidate"> <meta http-equiv"Pragma" content"no-cache"> <meta http-equiv"Expires" content"0"> 使用meta元素的htt…...
kotlin 的函数参数
https://blog.csdn.net/yoonerloop/article/details/123241451 一、无参数的函数参数 1、回调 //定义 interface OnClickListener { fun onClick() } private fun setOnClickListener(listener: OnClickListener) { } //使用 setOnClickListener(object : OnClickLi…...
谈谈 Kafka 的幂等性 Producer
使用消息队列,我们肯定希望不丢消息,也就是消息队列组件,需要保证消息的可靠交付。消息交付的可靠性保障,有以下三种承诺: 最多一次(at most once):消息可能会丢失,但绝…...
Doris(三)-集群部署3个FE+3个BE
前置 1)配置java环境 1st 解压jdk包 unzip jdk1.8.0_171-amd64.zip 2nd 配置环境变量 vim /etc/profile#文末添加JAVA_HOME/data/jdk1.8.0_171-amd64 PATH$JAVA_HOME/bin:$PATHexport PATH JAVA_HOME3rd 启用配置 source /etc/profile 4th 验证 java -versi…...
js沙箱逃逸
目录 一、什么是沙箱(sandbox) 二、沙箱技术的实现 & node.js 2.1简单沙箱程序示例 2.2this.tostring S1: S2: 三、arguments.callee.caller 一、什么是沙箱(sandbox) 在计算机安全性方面,沙箱(沙盒、sanboxÿ…...
振弦传感器信号转换器应用山体滑坡安全监测
振弦传感器信号转换器应用山体滑坡安全监测 随着人类文明的进步,自然灾害对人们的生活和财产安全造成的威胁也越来越大。山体滑坡作为自然灾害中的一种,给人们的生活和财产安全带来了极大的威胁。因此,进行山体滑坡的安全监测显得尤为重要。振…...
Moonbeam新增强大的互操作性功能至波卡生态
波卡上的领先多链开发平台Moonbeam发布适用于平行链间活动的新版本互操作性功能。最新的链更新Runtime 2401,是自Moonbeam上线后的最大更新,其中包括三个针对开发者于链上的里程碑式更新: 用于访问消息传递功能的预编译智能合约从其他波卡平…...
考研408 | 【计算机网络】概述
计算机网络体系结构 计算机网络概述:1.概念,组成,功能,分类2.标准化工作及相关组织3.性能指标体系结构&参考模型:1.分层结构2.协议,接口,服务3.ISO/OSI模型4.TCP/IP模型 目录 计算机网络体…...
一道名题-(csp 儒略日)的心得与技巧
这道题,我做了三年,平均每年做一次,我来讲讲我的心得。 读题 题面很长,细节很多,我们需要耐心细心的读,此时多花一点时间是划得来的。 我们得出大致关系如下 历法公历日常用历儒略历公元前公元后历法公历…...
单元测试之- mock工具mockito
常用的mock工具mockito 在编写单元测试时,需要mock依赖的对象,减少依赖对象对测试的影响,Mocktio是常用的mock工具之一,那么mockito提供了哪些功能呢? Mock对象的创建和配置:Mockito可以通过简单的语法创建…...
03 线程间共享数据
unique_lock 因为unique_lock类也具有成员函数lock,unlock,trylock,它含有一个内部标志,表明关联的互斥是否正在被使用,此标志可以通过调用成员函数owns_lock()查询。 1 在初始化过程中保护共享数据 延迟初始化 ( l…...
题目:2264.找到一个数字的 K 美丽度
题目来源: leetcode题目,网址:2269. 找到一个数字的 K 美丽值 - 力扣(LeetCode) 解题思路: 使用滑动窗口遍历判断,窗口中放置 k 个数字,每次后移一位。 解题代码: c…...
分布式ID性能评测:CosId VS 美团 Leaf
环境 MacBook Pro (M1)JDK 17JMH 1.36运行在本机 Docker 内的 mariadb:10.6.4 运行 CosId SegmentChainId 模式,基准测试代码: Benchmarkpublic long generate() {return segmentChainId.generate();}Leaf 基准测试代码: Benchmarkpublic l…...
MySQL数据库安装(二)
夕阳留恋的不是黄昏,而是朝阳 上一章简单介绍了MySQL数据库概述(一), 如果没有看过, 请观看上一章 一. MySQL 卸载 一.一 停止MySQL服务 在卸载之前,先停止MySQL8.0的服务。按键盘上的“Ctrl Alt Delete”组合键,打开“任务管理器”对话…...
通过MySQL删除Hive元数据信息
之前遇到过一个问题,在进行Hive的元数据采集时,因为Hive表的文件已经被删除了,当时是无法删除表,导致元数据采集也发生了问题,所以希望通过删除Hive表的元数据解决上述问题。 之前安装时,经过特定的配置后…...
在电脑如何翻译文件名称并同时保存原文件名和新文件名称
不知道大家在日常工作中有没有遇见到文件名英语或其他评论文字需要翻译成中文呢,翻译成中文后,需要把原来文件名称一起保存下来,呈现上新文件名上。也是通俗的说法,新文件名称也有原文件名称在呢。这个就有点难度吧。一般我们常见…...
Modbus协议简介与常用测试指令说明
DateAuthorVersionNote2022.07.19Dog TaoV1.01. 完成了文档的撰写。2023.08.04Dog TaoV1.21. 修订文档,增加了Modbus协议简介小节。 本文档提供ModbusPoll调试软件与官方部署文档合辑资源(CSDN平台)。 文章目录 Modbus协议简介发展历史主要技…...
EXCEL里数值列如何显示序号?如何重新排序? 怎么取得排序后的序号?
目录 1 EXCEL里如何显示序号? 2 如何重新排序? 3 怎么取得排序后的序号? 3.1 rank() 的序号可能不连续 3.2 方法2:SUMPRODUCT((C7>C$7:C$12)/COUNTIF(C$7:C$12,C$7:C$12))1 EXCEL里如何显示序号?如何重新排序…...
kubernetes 集群利用 efk 收集容器日志
文章目录 [toc]前情提要制作 centos 基础镜像准备 efk 二进制文件部署 efk 组件配置 namespace配置 gfs 的 endpoints配置 pv 和 pvc部署 elasticsearchefk-cmefk-svcefk-sts 部署 filebeatfilebeat-cmfilebeat-ds 部署 kibanakibana-cmkibana-svckibana-dp使用 nodeport 访问 …...
PHP和Node.js哪个更爽?
先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
【JVM】- 内存结构
引言 JVM:Java Virtual Machine 定义:Java虚拟机,Java二进制字节码的运行环境好处: 一次编写,到处运行自动内存管理,垃圾回收的功能数组下标越界检查(会抛异常,不会覆盖到其他代码…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版!!!6.8截至答题,大家注意呀! 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:( B ) A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
SpringCloudGateway 自定义局部过滤器
场景: 将所有请求转化为同一路径请求(方便穿网配置)在请求头内标识原来路径,然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
