el-table :span-method合并单元格

          <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%" :height="300"><el-table-column type="index" label="序号" width="50"></el-table-column><el-table-column prop="projectType" align="center" width="120" label="指标分类"></el-table-column><el-table-column prop="project" align="center" width="120" label="指标项目"></el-table-column><el-table-column prop="indicator" align="center" label="标准分"></el-table-column><el-table-column prop="score" align="center" label="得分数"></el-table-column></el-table>
data() {return {tableData: [],merge: [], // 存放需要合并的行subscript: '' // 需要合并行下标}
}methods: {// 拿到数据getTableList() {this.$request({ url: '/fault/CmRaterecordService/factoryStationRat', method: 'get', params: this.queryParams }).then(res => {console.log(res)if (res?.data?.length) {this.tableData = res.datathis.getMergeSubSceipt(res.data)}})},// 根据字段projectType做合并区分处理,具体看接口的区分字段getMergeSubSceipt(data) {if (data) {for (var i = 0; i < data.length; i++) {if (i === 0) {this.merge.push(1)this.subscript = 0} else {// 判断当前元素与上一个元素是否相同// 根据相同id进行合并,根据需要可进行修改if (data[i].projectType === data[i - 1].projectType) {this.merge[this.subscript] += 1this.merge.push(0)} else {this.merge.push(1)this.subscript = i}}}}},// 合并处理objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 1) {const _row = this.merge[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}}},
}

效果:

附:通过接口获取的tableData数据结构如下

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言进行实验:通过程序实现线算图取值【支持VC++ 6.0编辑器环境运行】

背景&#xff1a; 一、实验目的和要求 1、能描述数据基本类型及其常量的表示方法&#xff1b; 2、会对变量进行定义及初始化&#xff1b; 3、能使用运算符与表达式对变量赋值&#xff1b; 4、会描述C语句的概念及种类、C语言常用的输入/出方式&#xff1b; 5、会设计顺序…

SpringCloud 完整版--(Spring Cloud Netflix 体系)

目录 SpringCloudSpring Cloud Netflix 体系分布式概念&#xff1a;分析图单体应用分布式架构集群微服务分布式微服务集群 服务注册与发现Eureka作用&#xff1a;为什么使用Eureka&#xff1f;解答&#xff1a;分析图 搭建&#xff1a;1、注册中心Eureka-server搭建创建项目配置…

电子电器架构——基于Adaptive AUTOSAR的电子电器架构简析

基于Adaptive AUTOSAR的电子电器架构简析 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明…

[架构之路-240]:目标系统 - 纵向分层 - 应用层 - 应用层协议与业务应用程序的多样化,与大自然生物的丰富多彩,异曲同工

目录 前言&#xff1a; - 倒金子塔结构 - 大自然的组成 一、应用层在计算机系统中的位置 1.1 计算机应用程序的位置 1.1.1 业务应用程序概述 1.1.2 应用程序的分类 - 按照计算机作用范围 1.1.3 业务应用程序分类 - 按照行业分类 1.2 网络应用协议的位置 1.2.1 网络协…

Python学习基础笔记六十九——文本2

二进制&#xff08;字节&#xff09;模式&#xff1a; 文本文件&#xff0c;纯文本文件就是保存文本字符串的文件&#xff0c;跟word还不一样&#xff0c;word是富文本文件。 其实就文件存储的底层来说&#xff0c;不管什么类型的文件&#xff08;文本、视频、图片、word、Ex…

Ubuntu:VS Code IDE安装ESP-IDF【保姆级】

物联网开发学习笔记——目录索引 Visual Studio Code&#xff08;简称“VS Code”&#xff09;是Microsoft向开发者们提供的一款真正的跨平台编辑器。 参考&#xff1a; VS Code官网&#xff1a;Visual Studio Code - Code Editing. Redefined 乐鑫官网&#xff1a;ESP-IDF…

c#设计模式-行为型模式 之 解释器模式

&#x1f680;简介 给定一个语言&#xff0c;定义它的文法表示&#xff0c;并定义一个解释器&#xff0c;这个解释器使用该标识来解释语言中的 句子。 解释器模式包含以下主要角色 抽象表达式&#xff08;Abstract Expression&#xff09;角色&#xff1a;定义解释器的接口&…

Unity之ShaderGraph如何实现边缘光效果

前言 游戏中最常用的一个效果就是边缘光了&#xff0c;既可以做物体的高亮效果&#xff0c;也可以给人物皮肤表面添加光泽。如下图所示&#xff1a; 实现原理 边缘光的原理就是Fresnel节点的底层逻辑。 Fresnel&#xff1a;菲涅尔效应是根据视角不同表面上反射率不同的效应…

同为科技TOWE智能PDU引领数据中心机房远控用电安全高效

随着数据中心的环境变得更加动态和复杂&#xff0c;许多数据中心都在对数据中心管理人员施加压力&#xff0c;要求提高可用性&#xff0c;同时降低成本&#xff0c;提升效率。新一代高密度服务器和网络设备的投入使用&#xff0c;增加了对更高密度机架的需求&#xff0c;并对整…

添加Mybatis框架支持

配置环境 1.老项目 在pom.xml中使用generate ->edit starts->添加下面俩 2.新项目 然后运行发现会有报错 2.1这是因为没有配置数据库连接信息 spring:datasource:url: jdbc:mysql://localhost:3306/java2023?characterEncodingutf8&useSSLfalse # MySQL数…

攻防演练蓝队|Windows应急响应入侵排查

文章目录 日志分析web日志windows系统日志 文件排查进程排查新增、隐藏账号排查启动项/服务/计划任务排查工具 日志分析 web日志 dirpro扫描目录&#xff0c;sqlmap扫描dvwa Python dirpro -u http://192.168.52.129 -b sqlmap -u "http://192.168.52.129/dvwa/vulnera…

Express入门指南(详细)

文章目录 &#x1f7e2; Express⭐️ 1.初始Express✨安装✨使用Express 搭建一台服务器 ⭐️2.Express-基本路由✨1.使用字符串模式的路由路径示例&#xff1a;✨2.使用正则表达式的路由路径示例&#xff1a;✨3.中间件浅试(demo) ⭐️3.Express-中间件✨1.应用级中间件✨2.路…