vue3使用elementPlus进行table合并处理

elementPlus中table合并部分列

虚拟数据中公司下有多个客户,公司一样的客户,公司列需要合并,客户如果一样也需要合并进行展示,效果展示

在这里插入图片描述

const tableData = ref([])自定定义自已想要的数据,一般都是通过接口拿到

//table
<template><el-table:data="tableData"style="width: 80vw; margin-bottom: 20px":row-class-name="(({row}) => row.rowClass)"border:span-method="tableSpanMethod"><el-table-column prop="company_name" label="公司" width="200"></el-table-column><el-table-column prop="firm_name" label="客户名称"></el-table-column><el-table-column prop="user_name" label="名称"></el-table-column><el-table-column prop="biz_date" label="日期"></el-table-column><el-table-column prop="" label="金额"><el-table-column prop="back_date" label="日期"></el-table-column><el-table-column prop="back_status" label="已退"></el-table-column><el-table-column prop="dc_money" label="金额(元)"></el-table-column></el-table-column><el-table-column prop="balance_money" label="余额(元)"></el-table-column></el-table></template>

定义一个方法进行数据处理:

const getData = ()=>{let temp = [],companyRow,firmRowtableData.forEach((item,index)=>{temp.push(item)companyRow = !companyRow ? Object.assign(item, {companySpan: 0}) : companyRowcompanyRow.companySpan++firmRow = !firmRow ? Object.assign(item, {firmSpan: 0}) : firmRowfirmRow.firmSpan++if(item.company_name != tableData[index + 1]?.company_name){companyRow = nullfirmRow = null}else{if(item.firm_name !== tableData[index+ 1]?.firm_name){firmRow = null}}})}

然后是tableSpan的方法定义:

const tableSpanMethod = ({row,column,rowIndex,columnIndex})=>{if(column.property ===  'company_name'){return row.companySpan ? [row.companySpan, 1] : [0,0]}if(column.property == 'firm_name'){return row.firmSpan ? [row.firmSpan, 1] : [0,0]}}

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

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

相关文章

后端:跨端轻量JavaScript引擎的实现与探索

一、JavaScript 1.JavaScript语言 JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。 ECMAScript发展史: 时间版本说明1997年7月ES1.0 发布当年7月&#xff0c;ECMA262 标准出台1998年6月ES2.0 发布该版本修改完全符合…

Netty权威指南——基础篇2(NIO编程)

1 概述 与Socket类和ServerSocket&#xff0c;NIO也提供了SocketChannel和ServerSocketChannel两种不同的套接字通道实现。这两种新增的通道都支持阻塞和非阻塞两种模式。阻塞模式使用简单&#xff0c;但性能和可靠性都不好&#xff0c;非阻塞模式则正好相反。一般来说&#xf…

康复训练day2——2024牛客寒假集训营6

一道很好的构造题&#xff0c;受益匪浅。 链接&#xff1a;F-命运的抉择_2024牛客寒假算法基础集训营6 (nowcoder.com)​​​​​​ 题意&#xff1a; 题解 &#xff08;并查集 思维&#xff09;&#xff1a; 首先将存在1的情况特判掉&#xff0c;我们的数组的元素都是> 2的…

告别 Axure 卡顿!国产原型设计工具,体验更流畅

原型设计工具的应用场景包括产品展示、产品需求规划和抽象到具体呈现&#xff0c;那么如何根据应用场景选择合适的原型工具呢&#xff1f;不用说&#xff0c;本文列出了常用的原型设计工具&#xff0c;看看你最想选择哪一个&#xff01; 即时设计 即时设计具有一站式原型、设…

【lv14 day10内核模块参数传递和依赖】

一、模块传参 module_param(name,type,perm);//将指定的全局变量设置成模块参数 /* name:全局变量名 type&#xff1a; 使用符号 实际类型 传参方式 bool bool insmod xxx.ko 变量名0 或 1 invbool bool insmod xxx.ko 变量名0 或 1 charp char * insmod xxx.ko 变量名“字符串…

Facebook与社交创新:数字时代的社交构建者

在当今数字化时代&#xff0c;社交媒体已经成为人们日常生活中不可或缺的一部分。而在这个庞大的社交网络中&#xff0c;Facebook作为其中的巨头之一&#xff0c;不仅扮演着连接人们的桥梁&#xff0c;更是社交创新的领导者和推动者。本文将探讨Facebook在数字时代的社交构建中…

python Matplotlib Tkinter-->最终框架一

3D雷达上位机实例(能够通过点击柱状图来展示3D雷达数据)2024.2.26 环境 python:python-3.12.0-amd64 包: matplotlib 3.8.2 pillow 10.1.0 import matplotlib.pyplot as plt from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg, NavigationToolbar2Tk impor…

react useMemo 用法

1&#xff0c;useCallback 的功能完全可以由 useMemo 所取代&#xff0c;如果你想通过使用 useMemo 返回一个记忆函数也是完全可以的。 usecallback(fn,inputs)is equivalent to useMemo(()> fn, inputs). 区别是:useCallback不会执行第一个参数函数&#xff0c;而是将它返…

领先科技2024年3月5-7日第12届国际生物发酵展-宁泰橡塑

参展企业介绍 湖南宁泰橡塑有限公司&#xff08;简称“宁泰”&#xff09;位于国家 级湖南省浏阳经济技术开发区&#xff0c;距离省会城市长沙35公里&#xff0c;距离黄花国际机场18公里&#xff0c;交通便利&#xff0c;区位和地缘优势明显。宁泰是一家专业从事卫生级橡塑制品…

cmake 构建Qt存在多个子项目的应用

概述&#xff1a;一般在开发UI应用时候我们都会存在多个子项目&#xff0c;比如一个是主UI界面的项目&#xff0c;有些动态库的项目&#xff0c;主UI中用到子项目中的动态库&#xff0c;我们来看看如何利用cmake来构建这样的一个工程&#xff0c;方便我们在跨平台中开发(macos、…

安防视频监控平台EasyNVR级联视频上云管理平台EasyNVS,出现报错“i/o deadline reached”该如何解决?

上云网关管理平台EasyNVS视频综合管理系统具备汇聚与管理EasyGBS、EasyNVR等平台的能力&#xff0c;系统可以将接入的视频资源实现视频能力统一输出&#xff0c;并能进行远程可视化运维等管理功能&#xff0c;还能解决设备现场没有固定公网IP却需要在公网直播的需求。 有用户反…

golang gin单独部署vue3.0前后端分离应用

概述 因为公司最近的项目前端使用vue 3.0&#xff0c;后端api使用golang gin框架。测试通过后&#xff0c;博文记录&#xff0c;用于备忘。 步骤 npm run build&#xff0c;构建出前端项目的dist目录&#xff0c;dist目录的结构具体如下图 将dist目录复制到后端程序同级目录…

Bluesky数据采集框架-4

编写自定义计划 如在以上简单自定义中提到&#xff0c;count()和scan()的"预装配"计划是从更小的"plan stubs"构建的。我们组合和匹配"stubs"和/或"预装配"计划来构建自定义计划。 有很多计划stubs&#xff0c;因此导入整个模块并且…

低价对品牌渠道的危害

品牌价值的体现主要在价格&#xff0c;比如要与竞品体现差异&#xff0c;除了产品功能上有做出差异&#xff0c;价格上也需要设置不同的阶梯&#xff0c;但如果经销商不遵守这个体系&#xff0c;或者非授权店铺随意低价&#xff0c;对于品牌来说都是非常不好的事情&#xff0c;…

ubuntu20.04安装和使用 Maldet (Linux Malware Detect)

1、下载 Maldet sudo wget http://www.rfxn.com/downloads/maldetect-current.tar.gz 2、解压Maldet sudo tar -xvf maldetect-current.tar.gz 3、进入到Maldet目录&#xff0c;然后运行安装脚本 sudo ./install.sh 4、安装ClamAV sudo apt-get update sudo apt-get in…

【程序员英语】【美语从头学】初级篇(入门)(笔记)Lesson 16 At the Shoe Store 在鞋店

《美语从头学初级入门篇》 注意&#xff1a;被 删除线 划掉的不一定不正确&#xff0c;只是不是标准答案。 文章目录 Lesson 16 At the Shoe Store 在鞋店对话A对话B笔记会话A会话B替换 Lesson 16 At the Shoe Store 在鞋店 对话A A: Do you have these shoes in size 8? B:…

交叉编译qt到arm平台

使用pkg-config命令查看xxx包是否存在&#xff1a; pkg-config --print-errors xxx pkg-config的搜索路径可以通过环境变量PKG_CONFIG_PATH指定。需要在运行./configure 之前指定。 ./configure -release -qt-libjpeg -qt-libpng -qt-zlib -qt-pcre -xplatform linux-aarch64-…

【Git教程】(三)提交详解 —— add、commit、status、stach命令的说明,提交散列值与历史,多次提交及忽略 ~

Git教程 提交详解 1️⃣ 访问权限与时间戳2️⃣ add命令与 commit 命令3️⃣ 提交散列值4️⃣ 提交历史5️⃣ 一种特别的提交查看方法6️⃣ 同一项目的多部不同历史6.1 部分输出&#xff1a;-n6.2 格式化输出&#xff1a;--format、--oneline6.3 统计修改信息&#xff1a;--st…

yolov8学习笔记(三)添加注意力机制+源码简单了解

目录 一、前言 二、注意力机制添加 三、源码简单了解 1、YOLO类中的——私有Model类 2、在哪来初始化的网络模型 3、注释版下载 4、笔记下载 一、前言 因为我没有学过pytorch&#xff0c;所以看源码也是一头雾水&#xff0c;不过大概看懂的是yolo是对pytorch的再次封装&a…

聚集高速托盘类四向穿梭车ASRV|一车跑全仓可获得10000个货位的HEGERLS智能搬运机器人

随着国内外制造业加速转型升级&#xff0c;越来越多的企业需要进行物流智能化升级&#xff0c;但是往往受到仓库面积、高度、形状等现实条件的限制&#xff0c;以及市场不确定性因素的影响。因此&#xff0c;相对于投资传统的自动化立体库&#xff0c;企业更倾向于选择智能化、…