当前位置: 首页 > news >正文

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 合并后的样式&#xff1a; el-table-column 需要添加property字段&#xff0c;属性值同props&#xff0c;用来判断需要合并的字段 <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

使用消息队列&#xff0c;我们肯定希望不丢消息&#xff0c;也就是消息队列组件&#xff0c;需要保证消息的可靠交付。消息交付的可靠性保障&#xff0c;有以下三种承诺&#xff1a; 最多一次&#xff08;at most once&#xff09;&#xff1a;消息可能会丢失&#xff0c;但绝…...

Doris(三)-集群部署3个FE+3个BE

前置 1&#xff09;配置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&#xff1a; S2&#xff1a; 三、arguments.callee.caller 一、什么是沙箱(sandbox) 在计算机安全性方面&#xff0c;沙箱&#xff08;沙盒、sanbox&#xff…...

振弦传感器信号转换器应用山体滑坡安全监测

振弦传感器信号转换器应用山体滑坡安全监测 随着人类文明的进步&#xff0c;自然灾害对人们的生活和财产安全造成的威胁也越来越大。山体滑坡作为自然灾害中的一种&#xff0c;给人们的生活和财产安全带来了极大的威胁。因此&#xff0c;进行山体滑坡的安全监测显得尤为重要。振…...

Moonbeam新增强大的互操作性功能至波卡生态

波卡上的领先多链开发平台Moonbeam发布适用于平行链间活动的新版本互操作性功能。最新的链更新Runtime 2401&#xff0c;是自Moonbeam上线后的最大更新&#xff0c;其中包括三个针对开发者于链上的里程碑式更新&#xff1a; 用于访问消息传递功能的预编译智能合约从其他波卡平…...

考研408 | 【计算机网络】概述

计算机网络体系结构 计算机网络概述&#xff1a;1.概念&#xff0c;组成&#xff0c;功能&#xff0c;分类2.标准化工作及相关组织3.性能指标体系结构&参考模型&#xff1a;1.分层结构2.协议&#xff0c;接口&#xff0c;服务3.ISO/OSI模型4.TCP/IP模型 目录 计算机网络体…...

一道名题-(csp 儒略日)的心得与技巧

这道题&#xff0c;我做了三年&#xff0c;平均每年做一次&#xff0c;我来讲讲我的心得。 读题 题面很长&#xff0c;细节很多&#xff0c;我们需要耐心细心的读&#xff0c;此时多花一点时间是划得来的。 我们得出大致关系如下 历法公历日常用历儒略历公元前公元后历法公历…...

单元测试之- mock工具mockito

常用的mock工具mockito 在编写单元测试时&#xff0c;需要mock依赖的对象&#xff0c;减少依赖对象对测试的影响&#xff0c;Mocktio是常用的mock工具之一&#xff0c;那么mockito提供了哪些功能呢&#xff1f; Mock对象的创建和配置&#xff1a;Mockito可以通过简单的语法创建…...

03 线程间共享数据

unique_lock 因为unique_lock类也具有成员函数lock&#xff0c;unlock&#xff0c;trylock&#xff0c;它含有一个内部标志&#xff0c;表明关联的互斥是否正在被使用&#xff0c;此标志可以通过调用成员函数owns_lock()查询。 1 在初始化过程中保护共享数据 延迟初始化 ( l…...

题目:2264.找到一个数字的 K 美丽度

​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;2269. 找到一个数字的 K 美丽值 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 使用滑动窗口遍历判断&#xff0c;窗口中放置 k 个数字&#xff0c;每次后移一位。 解题代码&#xff1a; c…...

分布式ID性能评测:CosId VS 美团 Leaf

环境 MacBook Pro (M1)JDK 17JMH 1.36运行在本机 Docker 内的 mariadb:10.6.4 运行 CosId SegmentChainId 模式&#xff0c;基准测试代码&#xff1a; Benchmarkpublic long generate() {return segmentChainId.generate();}Leaf 基准测试代码&#xff1a; Benchmarkpublic l…...

MySQL数据库安装(二)

夕阳留恋的不是黄昏&#xff0c;而是朝阳 上一章简单介绍了MySQL数据库概述(一), 如果没有看过, 请观看上一章 一. MySQL 卸载 一.一 停止MySQL服务 在卸载之前&#xff0c;先停止MySQL8.0的服务。按键盘上的“Ctrl Alt Delete”组合键&#xff0c;打开“任务管理器”对话…...

通过MySQL删除Hive元数据信息

之前遇到过一个问题&#xff0c;在进行Hive的元数据采集时&#xff0c;因为Hive表的文件已经被删除了&#xff0c;当时是无法删除表&#xff0c;导致元数据采集也发生了问题&#xff0c;所以希望通过删除Hive表的元数据解决上述问题。 之前安装时&#xff0c;经过特定的配置后…...

在电脑如何翻译文件名称并同时保存原文件名和新文件名称

不知道大家在日常工作中有没有遇见到文件名英语或其他评论文字需要翻译成中文呢&#xff0c;翻译成中文后&#xff0c;需要把原来文件名称一起保存下来&#xff0c;呈现上新文件名上。也是通俗的说法&#xff0c;新文件名称也有原文件名称在呢。这个就有点难度吧。一般我们常见…...

Modbus协议简介与常用测试指令说明

DateAuthorVersionNote2022.07.19Dog TaoV1.01. 完成了文档的撰写。2023.08.04Dog TaoV1.21. 修订文档&#xff0c;增加了Modbus协议简介小节。 本文档提供ModbusPoll调试软件与官方部署文档合辑资源&#xff08;CSDN平台&#xff09;。 文章目录 Modbus协议简介发展历史主要技…...

EXCEL里数值列如何显示序号?如何重新排序? 怎么取得排序后的序号?

目录 1 EXCEL里如何显示序号&#xff1f; 2 如何重新排序&#xff1f; 3 怎么取得排序后的序号&#xff1f; 3.1 rank() 的序号可能不连续 3.2 方法2&#xff1a;SUMPRODUCT((C7>C$7:C$12)/COUNTIF(C$7:C$12,C$7:C$12))1 EXCEL里如何显示序号&#xff1f;如何重新排序…...

kubernetes 集群利用 efk 收集容器日志

文章目录 [toc]前情提要制作 centos 基础镜像准备 efk 二进制文件部署 efk 组件配置 namespace配置 gfs 的 endpoints配置 pv 和 pvc部署 elasticsearchefk-cmefk-svcefk-sts 部署 filebeatfilebeat-cmfilebeat-ds 部署 kibanakibana-cmkibana-svckibana-dp使用 nodeport 访问 …...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...