element ui table进行相同数据合并单元格

news2024/12/22 11:19:23

示例如图

在这里插入图片描述

//要合并的项(自定义)
const columnArr =  ["dq","sj","xj","zj","zjj","zjfzr","nhxm","nhsjh","nhsfzh","","","","","ddzhl","ddw"]

首先计算需要合并的单元格

const spanData = ref<any>([])
const getSpanData = (data) => {
  columnArr.forEach((element) => {
    let contactDot = 0;
    const spanArr = <any>[];
    data.forEach((item, index) => {
      if (index === 0) {
        spanArr.push(1);
      } else {
        //先判断ID是否一样,再合并同类项
        if (item.id == data[index - 1].id && item[element] === data[index - 1][element]) {
          spanArr[contactDot] += 1;
          spanArr.push(0);
        } else {
          contactDot = index;
          spanArr.push(1);
        }
      }
    });
    spanData.value.push(spanArr);
  });
}

Table上绑定 span-method 属性

<el-table ref="roleTableRef" :data="dataList" :span-method="objectSpanMethod">
const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  if (columnArr.includes(column.property)) {
    if (spanData.value[columnIndex][rowIndex]) {
      return {
        rowspan: spanData.value[columnIndex][rowIndex],
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
}

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

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

相关文章

uniapp 实现 ble蓝牙同时连接多台蓝牙设备,支持app、苹果(ios)和安卓手机,以及ios连接蓝牙后的一些坑

首先对 uniapp BLE蓝牙API进行封装 这里我封装了一个类&#xff1a;bluetoothService.js 代码&#xff1a; import { throttle } from lodash export default class Bluetooth {constructor() {this.device {};this.connected false;// 使用箭头函数绑定类实例的上下文&am…

51单片机应用开发(进阶)---模块化编程

实现目标 1、掌握.h 文件的格式、extern 的用法&#xff1b; 2、握模块化编程方法步骤&#xff1b; 3、具体实现&#xff1a;&#xff08;1&#xff09;提供一个C文件&#xff0c;将其按照功能模块进行模块化。 一、为什么要进行模块化编程&#xff1f; 传统的编程方式&…

arkUI:水果选择与管理:基于 ArkUI 的长按编辑功能实现

水果选择与管理&#xff1a;基于 ArkUI 的长按编辑功能实现 1 主要内容说明2 相关内容2.1 相关内容2.1.1 源码1内容的相关说明2.1.1.1 数据结构与状态管理2.1.1.2 添加水果功能2.1.1.3 水果列表展示2.1.1.4 长按进入编辑模式2.1.1.5 复选框的多选功能2.1.1.6 删除水果功能2.1.1…

小程序20-样式:自适应尺寸单位 rpx

手机设备的宽度逐渐多元化&#xff0c;也就需要开发者开发过程中&#xff0c;去适配不同屏幕宽度的手机&#xff0c;为了解决屏幕适配问题&#xff0c;微信小程序推出了 rpx 单位 rpx&#xff1a;小程序新增的自适应单位&#xff0c;可以根据不同设备的屏幕宽度进行自适应缩放 …

unity3d————Resources异步加载

知识点一&#xff1a;Resources异步加载是什么&#xff1f; 在Unity中&#xff0c;资源加载可以分为同步加载和异步加载两种方式。同步加载会在主线程中直接进行&#xff0c;如果加载的资源过大&#xff0c;可能会导致程序卡顿&#xff0c;因为从硬盘读取数据到内存并进行处理…

C#/WinForm拖拽文件上传

一、首先创建一个上传文件的类&#xff0c;继承Control类&#xff0c;如下&#xff1a; public class UploadControl : Control{private Image _image;public UploadControl(){this.SetStyle(ControlStyles.UserPaint | //控件自行绘制&#xff0c;而不使用操作系统的绘制Cont…

2024 同一个网段,反弹shell四种方法【linux版本】bash、python、nc、villian反弹shell图解步骤

实验环境准备&#xff08;同一个网段下&#xff0c;我是桥接的虚拟机&#xff09; 一、bash反弹shell 二、python反弹shell 三、nc反弹shell 四、villain反弹shell 实验环境准备&#xff08;同一个网段下&#xff0c;我是桥接的虚拟机&#xff09; 一台kali的linux(攻击者)…

FPGA使用Verilog实现CAN通信

FPGA实现CAN通信&#xff08;Verilog&#xff09; 1.作者使用的方法是通过FPGA芯片&#xff08;如Xilinx公司的型号为XC7K325TFFG676-2&#xff09;控制SJA1000T芯片&#xff08;CAN控制器芯片&#xff09;实现CAN通信&#xff0c;如下图所示&#xff1a; 2.熟悉连接方式之后&…

已解决:spark代码中sqlContext.createDataframe空指针异常

这段代码是使用local模式运行spark代码。但是在获取了spark.sqlContext之后&#xff0c;用sqlContext将rdd算子转换为Dataframe的时候报错空指针异常 Exception in thread "main" org.apache.spark.sql.AnalysisException: java.lang.RuntimeException: java.lang.Nu…

jenkins用户在执行scp的时候如何做免密登录

一、背景 在jenkins job中执行scp的shell命令&#xff0c;当然不希望每次输入密码&#xff0c;另外处于出于安全考虑&#xff0c;也不建议在scp命令中指定。 所以&#xff0c;我们需要对远程机器进行免密登录。 本文遇到的问题是&#xff0c;在jenkins机器上执行scp已做到了…

HarmonyOS ArkUI(基于ArkTS) 开发布局 (中)

HarmonyOS ArkUI(基于ArkTS) 开发布局 &#xff08;上&#xff09; 四 层叠布局 (Stack) 层叠布局&#xff08;StackLayout&#xff09;用于在屏幕上预留一块区域来显示组件中的元素&#xff0c;提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠&…

无线网络信号 6G、5G和2.4G 的一些小科普

无线网络信号划分为6G、5G和2.4G这几类信号&#xff0c;它们各自有不同的用途和区别&#xff1a; 1、 2.4G无线技术 - 用途&#xff1a;2.4G无线技术广泛应用于智能家居、物联网、WLAN和蓝牙设备等。它是一个全球性的工作频段&#xff0c;适用于低速率的应用&#xff0c;如普通…

什么是GCP kunernetes的Node Taints and Tolerations

在Kubernetes中&#xff0c;Node taints和Pod tolerations是两个相关的功能&#xff0c;它们用于控制Pods的调度&#xff0c;以确保Pods不会调度到不适当的节点上。以下是这两个概念的详细解释&#xff1a; Node Taints&#xff08;节点污点&#xff09; 定义&#xff1a;Node…

ROS进阶:使用URDF和Xacro构建差速轮式机器人模型

前言 本篇文章介绍的是ROS高效进阶内容&#xff0c;使用URDF 语言&#xff08;xml格式&#xff09;做一个差速轮式机器人模型&#xff0c;并使用URDF的增强版xacro&#xff0c;对机器人模型文件进行二次优化。 差速轮式机器人&#xff1a;两轮差速底盘由两个动力轮位于底盘左…

【Playwright + Python】系列(十)利用 Playwright 完美处理 Dialogs 对话框

哈喽&#xff0c;大家好&#xff0c;我是六哥&#xff01;今天我来给大家分享一下如何使用playwight处理Dialogs对话框&#xff0c;面向对象为功能测试及零基础小白&#xff0c;这里我尽量用大白话的方式举例讲解&#xff0c;力求所有人都能看懂&#xff0c;建议大家先收藏&…

控制器ThinkPHP6

五、控制器中对数组值的返回 在做接口服务时&#xff0c;很多时候回使用数组作为返回值&#xff0c;那么数组如何返回成 json呢&#xff1f; 在 tp6 中返回json 很简单&#xff0c;直接使用 json 进行返回即可&#xff0c;例如&#xff1a; public function index(){$resarra…

基于Java Springboot城市交通管理系统

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数…

Ubuntu24.04挂载磁盘

一、引言 由于几块磁盘每次开机时的编号都不一样&#xff0c;造成了很多麻烦&#xff0c;所有重新挂载磁盘试一试。 参考链接&#xff1a; ubuntu挂载磁盘或U盘Ubuntu添加新硬盘&#xff0c;挂载到根目录下的某个文件中 二、挂载磁盘 1. 查看盘名 sudo fdisk -l sda 代表第…

springboot003基于springboot的图书个性化推荐系统(源码+包运行+LW+技术指导)

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

【React】状态管理之Zustand

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 状态管理之Zustand引言1. Zustand 的核心特点1.1 简单直观的 API1.2 无需 Provi…