【ElementUI】el-table值相同时合并行

embedded/2024/9/23 4:32:00/

效果图:

大致思路:el-table里添加合并行或列的计算方法span-method

<el-table :data="tableList" :span-method="objectSpanMethod">
javascript">     // 在获取到列表数据tableData后调用此方法   handleTableData(tableData) {let rowSpanArr = [], position = 0;for (let [index, item] of tableData.entries()) {if (index === 0) {rowSpanArr.push(1);position = 0;} else {// 此处判断userName相同时进行合并,需要替换自己的属性名if (item.userName === tableData[index - 1].userName) {rowSpanArr[position] += 1; //名称相同,合并到同一个数组中rowSpanArr.push(0);} else {rowSpanArr.push(1);position = index;}}}this.rowSpanArr = rowSpanArr;},// 合并行或列的计算方法objectSpanMethod({ row, column, rowIndex, columnIndex }) {// userName属性对应列表第0列if (columnIndex === 0 ) {if (this.rowSpanArr.length > rowIndex) {const rowSpan = this.rowSpanArr[rowIndex];return {rowspan: rowSpan, //行colspan: 1 //列};}}},

 


http://www.ppmy.cn/embedded/94419.html

相关文章

cookie和session的区别

**Cookie** 和 **Session** 是两种在 Web 开发中用来保存用户状态的机制&#xff0c;尽管它们的功能有一些重叠&#xff0c;但它们的工作原理、存储位置、使用场景和安全性各不相同。以下是它们的区别和特点。 一、Cookie #### 1. **存储位置** - **客户端存储**&#xff1a;Co…

月薪5W的项目经理是如何面试的?这份面试攻略请收好!

面试是项目经理求职必须经历的一关&#xff0c;但很多经验不够丰富的项目经理不知道面试会问些什么问题&#xff0c;也不知道要怎么回答&#xff0c;无疑会直接影响面试企业的判断&#xff0c;使项目经理求职受阳.所以&#xff0c;项目经理想要顺利求职&#xff0c;还是有必要掌…

大数据-79 Kafka 集群模式 集群监控方案 JavaAPI获取集群指标 可视化监控集群方案: jconsole、Kafka Eagle

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

【MongoDB】2.MongoDB导入文件

目录 一、MongoDB Compass 二、mongoimport 1、安装 2、语法&#xff1a; 3、可能出现的错误 三、MongoDB的GridFS 1、介绍 2、语法 一、MongoDB Compass 这个简单&#xff0c;不做赘述 二、mongoimport Mongoimport是一个用于导入数据到MongoDB的工具&#xff0c;默…

Leetcode 17.电话号码的字母组合

目录 题目 方法一 思路 代码 题目 17. 电话号码的字母组合 难度&#xff1a;中等 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对…

思科路由器的基本配置1

#路由技术基础# #路由器的基本配置1# #1调整超级终端的参数 #2退出配置向导&#xff0c;输入“NO”即可进入正常配置方式 #3路由器的模式切换 Router> &#xff01;进入用户模式 Router>enable &#xff01;进入特权模…

day25-系统优化

创建虚拟机后做下面优化&#xff0c;然后拍摄快照&#xff0c;做备份机 后面克隆此机改网卡即可理解&#xff1a; window 有 2 块网卡 本地网卡 192.168.13.253 用于连接外网 vmnet8 10.0.0.1(装虚拟机自动生成的 如果没有自动生成...)1. 虚拟机添加 2 块网卡&#xff1a; 第一…

RabbitMQ docker安装

后台配置文件 rabbitmq:image: rabbitmq:latestcontainer_name: rabbitmqports:- "5672:5672" # RabbitMQ server port- "15672:15672" # RabbitMQ management console portenvironment:RABBITMQ_DEFAULT_USER: adminRABBITMQ_DEFAULT_PASS: admin 若要打…