【VUE合并同一列相另的行的数据合并为一行:span-method】亲测有用

news2024/11/22 22:19:35

【VUE合并同一列相另的行的数据合并为一行:span-method】亲测有用

第一步:
给table加对应的标签的属性

:data="list"
:span-method="arraySpanMethod"

在这里插入图片描述
第二步:
在methods中添加对应的处理的方法

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {      
          const _row = this.getSpanArr(this.list).one[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col,
          }
        }
      },
        getSpanArr(arr) {
        if (arr) {
          const spanOneArr = []
          let concatOne = 0
          arr.forEach((item, index) => {
            if (index === 0) {
              spanOneArr.push(1)
            } else {        
              if (item.whoSend === arr[index - 1].whoSend) {
                // 第一列需合并相同内容的判断条件
                spanOneArr[concatOne] += 1
                spanOneArr.push(0)
              } else {
                spanOneArr.push(1)
                concatOne = index
              }
            }
            console.log(spanOneArr);
          })
          return { one: spanOneArr }
        }
      },

在这里插入图片描述

很有用!!!

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

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

相关文章

MQTT+ONENET+STM32+LWIP驱动

前言 近段时间由于项目需求,需要将原来的项目增加应用层的MQTT协议,由于不懂MQTT所以从B站学习了正点原子的lwip课程,看完后需要进行实践,所以选择了ONENET平台来作为学习的时间的平台。 1、学习准备 先下载工具: …

鸿蒙原生应用元服务开发-WebGL网页图形库开发接口说明

一、场景介绍 WebGL主要帮助开发者在前端开发中完成图形图像的相关处理,比如绘制彩色图形等。目前该功能仅支持使用兼容JS的类Web开发范式开发。 二、接口说明 表1 WebGL主要接口列表 本文参考引用HarmonyOS官方开发文档,基于API9。

Vue-Router学习笔记

文章目录 一、Vue Router简介二、简单使用三、动态路由匹配3.1 响应路由参数的变化3.2 捕获所有路由或 404 Not found 路由 四、路由的匹配语法4.1 在参数中自定义正则4.2 可重复的参数4.3 Sensitive 与 strict 路由配置4.4 可选参数 五、嵌套路由嵌套的命名路由 六、编程式导航…

利用百度竞价排名推广增加转化率-华媒舍

在数字营销领域,提高网站转化率是一个重要的目标。百度竞价排名是一种有效的推广方式,通过提高网站在搜索结果中的排名,能够吸引更多的用户点击,并且增加转化率。本文将介绍如何利用百度竞价排名来推广,并且提供一些最…

外盘国际期货分仓系统VUE源码展示

国际期货市场已经成为投资者追求高收益的重要战场。然而,面对复杂多变的市场环境,如何高效、安全地进行期货交易,成为了投资者们共同面临的挑战。今天,我们荣幸地向您推荐一款引领期货交易新风尚的利器——外盘国际期货分仓系统VU…

Leetcode刷题【每日n题】(7)

题目一 思路分析 中序遍历:先遍历左子树,再输出根节点,再遍历右子树 1.若当前节点的左子节点不为空,则递归遍历2.输出当前节点(根节点)3.若当前节点的左子节点不为空,则递归遍历 代码解析 cl…

知识文档管理系统平台:企业管理的王炸

无论是企业内部的文件共享,还是团队之间的协作编辑,知识文档管理系统都能发挥巨大的作用。它帮助企业整理、存储和查找各种文档资料,这不仅能提高企业的工作效率,还能增强企业的竞争力。今天就跟着LookLook同学一起来深入了解知识…

SDWAN专线对企业接入有门槛吗

SD-WAN(软件定义广域网)技术作为一种新型的网络解决方案,正在成为企业网络接入的热门选择。然而,对于企业来说,接入SD-WAN专线是否存在门槛,是一个值得探讨的问题。本文将从不同角度分析SD-WAN专线对企业接…

网络安全之URL过滤

知识改变命运,技术就是要分享,有问题随时联系,免费答疑,欢迎联系! URL过滤是一种针对用户的URL请求进行上网控制的技术,通过允许或禁止用户访问某些网页资源,达到规范上网行为和降低安全风险…

VUE/HTML网页在线编辑AutoCAD DWG文档

猿大师办公助手作为一款专业的网页在线编辑Office插件,不仅支持微软Office、金山WPS及永中Office完整嵌入到最新版Chrome、Ddge、Firefox等浏览器中使用,猿大师还可以把Autodesk的AutoCAD、DWG TrueView、Design Review等软件嵌入到浏览器网页中&#xf…

使用Office的小伙伴一定要把这个打开!关键时候能保命

使用电脑办公的小伙伴一定离不开Office。很多小伙伴在使用Office的时候,基本上都是双击打开对应的软件(Word/Excel/Powerpoint)就直接使用。 这种直接打开之后就使用的习惯很不值得提倡。除非你要记录的东西是一分钟就能完成的。 小白在企业上…

anaconda 4.4.0使用手册

安装完成后,anaconda 4.4.0自带的python版本是3.6.1 查看conda中的环境会发现只有root,别的都没有。 在这种情况下,是无法升级python版本的,安装python会报错,需要先新建一个环境。 然后activate 这个环境&#xff…

C语言--从零开始的扫雷游戏

C语言--从零开始的扫雷游戏 1. 游戏说明2. 总体代码3. 详细讲解3.1 菜单部分3.2 游戏主体部分3.2.1 总体分析3.2.2 棋盘初始化3.2.3 棋盘展示3.2.4 设置地雷3.2.5 扫雷阶段3.2.6 统计雷个数的代码3.2.7 使用迭代的方式进行展开:3.2.8 扫雷部分主体代码 4. 总结 1. 游…

阿里云第一次面试记录

java多态? 多态表示一个对象具有多种的状态,具体表现为父类的引用指向子类的实例 Fu f Zi z(); 多态是同一个行为具有多个不同表现形式或形态的能力。 多态就是同一个接口,使用不同的实例而执行不同操作 特点: 对象类型和引用类型…

C++中实现String类

String类实现 概述示例开发环境代码运行结果 注意 概述 本文主要记录自己实现一个String类中的部分功能。 示例 开发环境 Windows下Visual Studio 2019。 代码 MyString.h #pragma once #include <iostream>class MyString{ public:MyString();MyString(char *p);…

c语言函数:atoi与memset

1.atoi函数的头文件stdlib.h 空格跳过&#xff0c;遇到非数字非空格字符准备结束&#xff0c;如果前面有数字则输出数字&#xff0c;没有则输出0&#xff0c;其中-号不受影响&#xff0c;但不输出 memset函数&#xff08;目标值&#xff0c;操作值&#xff0c;字节数&#xff…

LeetCode102题:二叉树的层序遍历(python3)

代码思路&#xff1a;使用队列先进先出的特性&#xff0c;queue[]不为空进入for循环&#xff0c;tmp存储每层的节点&#xff0c;将结果添加至res[]中。 python中使用collections中的双端队列deque()&#xff0c;其popleft()方法可达到O(1)时间复杂度。 class Solution:def lev…

YOLOv9改进项目|关于本周更新计划的说明24/3/12

目前售价售价59.9&#xff0c;改进点30个 专栏地址&#xff1a; 专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;主力高效涨点&#xff01;&#xff01;&#xff01; 日期&#xff1a;24/3/12 本周更新计划说明&#xff1a; 1. 更新华为Gold YOLO中的…

为表重命名

oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 为表重命名 DDL 属 于 数 据 对 象 定 义 语 言&#xff0c; 主 要 的 功 能 是 创 建 对 象&#xff0c; 所 以 表 创 建 单 词 是create 但问题是&#xff0c;这些对象被…

如何使用vue实现购物车中数字的增减操作

实现效果如下&#xff08;当点击购买数量的时候&#xff0c;可以增减&#xff09;&#xff1a; 首先&#xff0c;写出界面原型&#xff1a; <div id"container"><table ref"myTable"><thead></thead><tbody><tr><…