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.data
                    this.rolePermitItemList.forEach(item => {
                        item.checked = item.isChecked ? true : false
                    })
                    //拿到数据后调用getSpanArr,数据结构为el-table正常的list
                    this.getSpanArr(this.rolePermitItemList);
                }
            })
        },
     
		 getSpanArr(data) {
            this.mergeArr.forEach((key, index1) => {
                let count = 0; // 用来记录需要合并行的起始位置
                this.mergeObj[key] = []; // 记录每一列的合并信息
                data.forEach((item, index) => {
                    // index == 0表示数据为第一行,直接 push 一个 1
                    if (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.moduleName
            console.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];
                }
            }
        },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/62753.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

import有什么用,python中怎么使用import

目录 引言 import的概念 import的作用 import的应用 Python中如何使用import import报错处理 代码示例 注意事项 总结 引言 在Python编程语言中&#xff0c;import是一个关键字&#xff0c;用于将其他模块或库的功能引入当前代码中。import的概念和功能使得Python成为…

Unity制作护盾——1、闪电护盾

Unity引擎制作闪电护盾效果 大家好&#xff0c;我是阿赵。   这期做一个闪电护盾的效果。 一、效果说明 可以改变闪电的颜色 可以改变范围 改变贴图的平铺次数&#xff0c;也可以做出各种不同感觉的护盾。 二、原理 这个效果看着很复杂&#xff0c;其实只是用了一张N…

用 docker 创建 jmeter 容器,能做性能测试?

我们都知道&#xff0c;jmeter 可以做接口测试&#xff0c;也可以用于性能测试&#xff0c;现在企业中性能测试也大多使用 jmeter。docker 是最近这些年流行起来的容器部署工具&#xff0c;可以创建一个容器&#xff0c;然后把项目放到容器中&#xff0c;就可以构建出一个独立的…

杂记 | 记录一次使用Docker安装gitlab-ce的过程(含配置交换内存)

文章目录 01 准备工作02 &#xff08;可选&#xff09;配置交换内存03 编辑docker-compose.yml04 启动并修改配置05 nginx反向代理06 &#xff08;可选&#xff09;修改配置文件07 访问并登录 01 准备工作 最近想自建一个gitlab服务来保存自己的项目&#xff0c;于是找到gitla…

RabbitMQ的安装

RabbitMQ的安装 1、Windows环境下的RabbitMQ安装步骤 使用的版本&#xff1a;otp_win64_23.2 rabbitmq-server-3.8.16 版本说明&#xff1a;https://www.rabbitmq.com/which-erlang.html#compatibility-matrix 1.1 下载并安装erlang RabbitMQ 服务端代码是使用并发式语言…

mybatis-plus 用法

目录 1 快速开始 1.1 依赖准备 1.2 配置准备 1.3 启动服务 2 使用 2.1 实体类注解 2.2 CRUD 2.3 分页 2.4 逻辑删除配置 2.5 通用枚举配置 2.6 自动填充 2.7 多数据源 3 测试 本文主要介绍 mybatis-plus 这款插件&#xff0c;针对 springboot 用户。包括引入&…

【测试】软件测试工具JMeter简单用法

简明扼要&#xff0c;点到为止。 1. JMeter介绍 JMeter的全称是Apache JMeter&#xff0c;是一款用于软件测试的工具软件&#xff0c;其是开源免费的&#xff0c;由Apache基金会运营。 官网&#xff1a;Apache JMeter - Apache JMeter™ 2. 下载安装及运行 2.1 安装 Java8…

喀麦隆ECTN(BESC)申请流程

据CAMEROON喀麦隆法令&#xff0c;所有发货至喀麦隆的货物都必须申请ECTN(BESC)电子货物跟踪单。如果没有申请&#xff0c;将被视为触犯喀麦隆的条例&#xff0c;并在目的港受到严厉惩罚。ECTN是英语ELECTRONIC CARGO TRACKING NOTE的简称&#xff1b;BESC是法语BORDEREAU ELEC…

Red Hat 安装MySQL 8.0与 Navicat

目录 Red Hat 安装 MySQL 8.0 1、更新软件包列表 2、安装MySQL服务器和客户端 3、启动MySQL服务 4、确保MySQL服务器正在运行 5、root 用户的密码 6、登录MySQL&#xff0c;输入mysql密码 7、MySQL默认位置 Red Hat 安装 Navicat 1、下载 Navicat 2、执行命令 Red H…

Qt项目---简单的计算器

在这篇技术博客中&#xff0c;我们将介绍如何使用Qt框架实现一个简单的计算器应用。我们将使用C编程语言和Qt的图形用户界面库来开发这个应用&#xff0c;并展示如何实现基本的算术操作。 项目设置 首先&#xff0c;我们需要在Qt Creator中创建一个新的Qt Widgets应用程序项目…

全志F1C200S嵌入式驱动开发(soc系统集成)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】 任何一个嵌入式设备都是由很多的子系统组成的。这里面有硬件、有软件,还可能有机械,并不一定就是大家看到的消费电子那样,即一个soc构成了所有的系统。现实情况是,要构建一个系…

网络:从socket编程的角度说明UDP和TCP的关系,http和tcp的区别

尝试从编程的角度解释各种网络协议。 UDP和TCP的关系 从Python的socket编程角度出发&#xff0c;UDP&#xff08;User Datagram Protocol&#xff09;和TCP&#xff08;Transmission Control Protocol&#xff09;是两种不同的传输协议。 TCP是一种面向连接的协议&#xff0c…

SpringBoot3---核心特性---2、Web开发III(模板引擎、国际化、错误处理)

星光下的赶路人star的个人主页 夏天就是吹拂着不可预期的风 文章目录 1、模板引擎1.1 Thymeleaf1.2 基础语法1.3 属性设置1.4 遍历1.5 判断1.6 属性优先级1.7 行内写法1.8 变量选择1.9 模板布局1.10 devtools 2、国家化3、错误处理3.1 默认机制3.2 自定义错误响应3.3 最佳实战 …

nginx+flask+uwsgi部署遇到的坑

文章目录 1.环境&#xff1a;2.uwsgi_conf.ini具体配置内容3.nginx 具体配置4.具体命令(注意使用pip3命令安装)5.服务异常排查 1.环境&#xff1a; centos8 uWSGI 2.0.22 gmssl 3.2.2 nginx version: nginx/1.18.0 项目目录&#xff1a; 2.uwsgi_conf.ini具体配置内容 [uws…

cocos creator 的input.on 不生效

序&#xff1a; 1、执行input.on的时候发现不生效 2、一直按控制台也打印不出来console.log 3、先收藏这篇&#xff0c;因为到时候cocos要开发serveApi的时候&#xff0c;你得选一款趁手的后端开发并且&#xff0c;对习惯用ts写脚本的你来说&#xff0c;node是入门最快&#xf…

IDEA中怎么使用git下载项目到本地,通过URL克隆项目(giteegithub)

点击 新建>来自版本控制的项目 点击后会弹出这样一个窗口 通过URL拉取项目代码 打开你要下载的项目仓库 克隆>复制 gitee github也是一样的 返回IDEA 将刚刚复制的URL粘贴进去选择合适的位置点击克隆 下载完成

深挖 Threads App 帖子布局,我进一步加深了对CSS网格布局的理解

当我遇到一个新产品时&#xff0c;我首先想到的是他们如何实现CSS。当我遇到Meta的Threads时也不例外。我很快就探索了移动应用程序&#xff0c;并注意到我可以在网页上预览公共帖子。 这为我提供了一个深入挖掘的机会。我发现了一些有趣的发现&#xff0c;我将在本文中讨论。 …

24届近5年重庆邮电大学自动化考研院校分析

今天给大家带来的是重庆邮电大学控制考研分析 满满干货&#xff5e;还不快快点赞收藏 一、重庆邮电大学 学校简介 重庆邮电大学简称"重邮"&#xff0c;坐落于直辖市-重庆市&#xff0c;入选国家"中西部高校基础能力建设工程”、国家“卓越工程师教育培养计划…

java的StringBuffer类和StringBuilder类

目录 StringBufferStringBuffer简介StringBuffer类的继承关系StringBuffer类的底层实现创建StringBuffer对象StringBuffer类的常用方法 StringBuilderStringBuilder简介 StringBuffer StringBuffer简介 StringBuffer对象是一个字符序列可变的字符串(String类不可变)。它和Str…

Java中Integer方法

先进行专栏介绍 本专栏是自己学Java的旅途&#xff0c;纯手敲的代码&#xff0c;自己跟着黑马课程学习的&#xff0c;并加入一些自己的理解&#xff0c;对代码和笔记 进行适当修改。希望能对大家能有所帮助&#xff0c;同时也是请大家对我进行监督&#xff0c;对我写的代码进行…