vue之elementui等表格单元格列合并

news2024/11/26 8:41:16

通用方法

<template>
	 <Table
          :columns="columns"
          :data="tableData"
          :loading="loading"
          :span-method="handleSpan"
        ></Table>
</template>
<script>
export default {
 data(){
 	return {
		   mergeObj: {}, // 用来记录需要合并行的下标
      	   mergeArr: ["name"], // 表格中的列名
	} 
 },
 methods(){
	  /**
     * 合并单元格
     */
    handleSpan({ row, column, rowIndex, columnIndex }) {
      // 判断列的属性
      if (this.mergeArr.indexOf(column.key) !== -1) {
        // 判断其值是不是为0
        if (this.mergeObj[column.key][rowIndex]) {
          return [this.mergeObj[column.key][rowIndex], 1];
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },
    //获取合并配置明细
    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
            }
          }
        });
      });
    },
  }
 }
</script>

效果:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AI时代,当项目经理遇到ChatGPT,插上腾飞的翅膀!

文章目录 一、 ChatGPT 在项目管理中的应用1. 任务分配和跟踪2. 风险管理3. 沟通和协作 二、 ChatGPT 在项目管理中的优势1. 高效性2. 可靠性3. 灵活性 三、 ChatGPT 在项目管理中的应用场景1. 智能会议2. 智能文档3. 智能报告 结语AI时代项目经理成长之道&#xff1a;ChatGPT让…

Lazada、速卖通、亚马逊等跨境平台自养买家号测评的用处及解析

做跨境电商的卖家越来越多&#xff0c;也吸引了许多卖家入驻&#xff0c;拥有庞大的用户群体和出色的物流配送能力。接触过跨境电商的朋友就会知道&#xff0c;跨境电商的市场虽然说很好&#xff0c;但是&#xff0c;要想成功的开好一个店铺并没有那么容易。 在平台上经营一家…

线程池配置介绍

一、前言 我们收银台项目为了架构简单&#xff0c;一些异步化任务(如下单完成扣减库存、发送邮件等等)&#xff0c;没有使用MQ而是直接启动线程来做&#xff0c;但如果随意使用线程对系统性能反而会有影响&#xff0c;当线程数量大到一定的时候会耗尽CPU和内存资源&#xff0c…

配置中心比较Apollo与Nacos

1、Nacos Nacos 致力于帮助您发现、配置和管理微服务。Nacos 提供了一组简单易用的特性集&#xff0c;帮助您实现动态服务发现、服务配置管理、服务及流量管理。 Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。 Nacos 是构建以“服务”为中心的现代应用架构(例如微服…

【发布】Photoshop ICO 文件格式插件 3.0

备注&#xff1a;本文原文首发于博客园&#xff1a; https://www.cnblogs.com/hoodlum1980/p/17766287.html 【简介】 Photoshop ICO 插件是为 Photoshop 开发的功能扩展插件&#xff0c;使得 Photoshop 可以直接读写 ICO 格式文件。由于 Photoshop 具有强大的像素位图编辑功…

企业订货系统常见问题与解决方案|网站定制搭建|小程序APP开发

企业订货系统常见问题与解决方案|网站定制搭建|小程序APP开发 在企业经营中&#xff0c;订货系统是一个非常重要的工具&#xff0c;它可以帮助企业快速地获取客户需求&#xff0c;制定生产计划&#xff0c;提高供应链效率&#xff0c;帮助企业快速、准确地计算出所需物资的数量…

人声分离软件:iZotope RX 10 (WinMac) 中文汉化版

iZotope RX 10是一款在音频修复和增强领域中非常出色的软件。它提供了一套全面的音频问题解决方案&#xff0c;为后期制作专业人员、音频工程师和视频编辑者解决各种棘手问题。 iZotope RX 10的主要特点包括&#xff1a; 声音修复功能&#xff1a;可以去除不良噪音、杂音、吱吱…

“氛围感 真环绕”可拆卸自由观影新物种 ——索尼发布“积木音响”HT-AX7

2023年10月16日&#xff0c;索尼(中国)有限公司发布新款蓝牙音响——“积木音响”HT-AX7。该音响采用索尼360SSM技术(360空间声场映射技术&#xff0c;简称360SSM)和独特的可拆卸结构设计&#xff0c;在实现传统音响的功能基础上&#xff0c;进一步为用户提供了创新式可移动多场…

内容监管新纪元:探索TikTok AIGC的应用与挑战

在当今数字时代&#xff0c;社交媒体已成为人们分享生活、观点和创意的主要平台。而TikTok&#xff0c;作为短视频领域的领军者&#xff0c;一直在不断创新&#xff0c;以满足用户的需求。最近&#xff0c;TikTok引入了一项新功能&#xff0c;旨在标记由人工智能生成的内容&…

Qt实现三次样条Cardinal曲线

目录 1. 前言 2. 预备知识 3. 代码实现 1. 前言 在设计矢量图案的时候&#xff0c;我们常常需要用到曲线来表达物体造型&#xff0c;单纯用鼠标轨迹绘制显然是不足的。于是我们希望能够实现这样的方法&#xff1a;通过设计师手工选择控制点&#xff0c;再通过插值得到过控制…

全天在线的健康小助手,dido E55S Pro智能手表体验

如今只需要借助一块具有健康监测功能的智能手表&#xff0c;我们就可以轻松记录自己的日常健康数据&#xff0c;像是心率、血压和血氧等&#xff0c;通过每天规律性评估&#xff0c;我们可以及时发现身体的一些变化&#xff0c;排除一些潜在的健康隐患。最近我尝试了一款国产的…

three.js学习-智慧城市

前言 在前面基础知识&#xff08;摄像机&#xff0c;渲染器&#xff0c;轨道控制器&#xff0c;坐标轴&#xff0c;场景适配&#xff0c;渲染循环、几何体、材质、光等&#xff09;有了基础了解后&#xff0c;还需要对着色器&#xff08;坐标&#xff09;有一定的学习了解然后就…

关于Python爬虫就业与兼职方向

Python是一种强大的编程语言&#xff0c;可用于各种应用&#xff0c;如数据分析、机器学习、Web开发等。因此&#xff0c;越来越多的人开始学习Python&#xff0c;同时也有越来越多的Python引流兼职和就业机会出现。本文将探讨Python引流兼职和就业的情况。 Python引流兼职 P…

MacOS无法打开pkg,因为它来自身份不明的开发者。

解决方案&#xff1a; 低版本MacOS&#xff1a; 高版本MacOS&#xff1a;

源码分析RocketMQ之TransactionMQProducer-事物消息

Apache RocketMq 在4.3.0版本中已经支持分布式事物消息&#xff0c;采用了2PC的的思想实现提交事物消息&#xff0c;同时增加一个补偿逻辑来处理二阶段超时或者失败的消息。 一、事物消息生产者:TransactionMQProducer 发送事物消息 TransactionMQProducer#sendMessage…

手机通过WiFi连接调试UR机器人

1.测试物料 1.1ur机器人 https://item.taobao.com/item.htm?spma1z10.1-c.w4004-25069442759.18.2ff56d6bmuxX0Z&id740002623764 1.2 路由器&#xff08;TPLINK&#xff09; https://detail.tmall.com/item.htm?abbucket7&id548610924784&ns1&spma21n57.1.…

性能超越 Clickhouse | 物联网场景中的毫秒级查询案例

1 物联网应用场景简介 物联网&#xff08;Internet of Things&#xff0c;简称 IoT&#xff09;是指通过各种信息传感、通信和 IT 技术来实时连接、采集、监管海量的传感设备&#xff0c;从而实现对现实世界的精确感知和快速响应&#xff0c;继而实现自动化、智能化管理。在查…

DITA-OT 4.0新特性 - PDF themes,定制PDF样式的新方法

随着DITA-OT 4.0的发布&#xff0c;它提供了一种新的定制PDF样式方法&#xff0c;这种方法就是PDF theme。这篇文章来聊一聊这种定制PDF输出的新方法和实验结果。 在进入PDF theme细节之前&#xff0c;为各位读者梳理一下DITA-OT将DITA和Markdown发布成PDF的几种方法。 - 1 …

『Linux升级路』基本指令

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;Linux &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、认识操作系统 &#x1f4d2;1.1什么是操作系统 &#x1f4d2;1.2操作系统…