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 访问 …...
Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
高危文件识别的常用算法:原理、应用与企业场景
高危文件识别的常用算法:原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件,如包含恶意代码、敏感数据或欺诈内容的文档,在企业协同办公环境中(如Teams、Google Workspace)尤为重要。结合大模型技术&…...
【HTTP三个基础问题】
面试官您好!HTTP是超文本传输协议,是互联网上客户端和服务器之间传输超文本数据(比如文字、图片、音频、视频等)的核心协议,当前互联网应用最广泛的版本是HTTP1.1,它基于经典的C/S模型,也就是客…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
算法:模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣(LeetCode) 遍历字符串:通过外层循环逐一检查每个字符。遇到 ? 时处理: 内层循环遍历小写字母(a 到 z)。对每个字母检查是否满足: 与…...
[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好,我是java1234_小锋老师,看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】,分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...
