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://www.mzph.cn/news/705189.shtml

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

相关文章

ubuntu+QT+ OpenGL环境搭建和绘图

一&#xff0c;安装OpenGL库 安装OpenGL依赖项&#xff1a;运行sudo apt install libgl1-mesa-glx命令安装OpenGL所需的一些依赖项。 安装OpenGL头文件&#xff1a;运行sudo apt install libgl1-mesa-dev命令来安装OpenGL的头文件。 安装GLUT库&#xff1a;GLUT&#xff08;Ope…

亚马逊巨头都在用的自养号大法,赶快get!

随着时间的推移&#xff0c;越来越多做亚马逊生意的朋友开始意识到自养号的重要性。拥有自养号意味着掌握了一手资源&#xff0c;这种自主性让人感到更安全。高权重的买家号可以享有更多的操作权限&#xff0c;也能获得更好的效果。然而&#xff0c;要想成功地养好自养号并不是…

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

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

python Matplotlib Tkinter-->导出pdf报表

环境 python:python-3.12.0-amd64 包: matplotlib 3.8.2 reportlab 4.0.9 import matplotlib.pyplot as plt from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg, NavigationToolbar2Tk import tkinter as tk import tkinter.messagebox as messagebox impor…

46.仿简道云公式函数实战-文本函数-CHAR

1. CHAR函数 函数可将计算机其他类型的数字代码转换为字符。 2. 函数用法 CHAR(number) CHAR 函数可将计算机其他类型的数字代码转换为字符。 Number&#xff1a;用于指定字符的数字。 3. 函数示例 CHAR(10)&#xff0c;即返回值为换行字符"\n"。 目前仿简道…

电脑背景图片怎么设置?这个方法让你一目了然

电脑背景图片的设置是个性化电脑桌面的重要步骤之一。一张美观的背景图片不仅可以为电脑带来视觉愉悦&#xff0c;还能反映个人品味和风格。在本文中&#xff0c;我们将介绍电脑背景图片的设置方法&#xff0c;共包括三种方式&#xff0c;通过分步骤详细说明&#xff0c;帮助用…

解决Maven爆红以及解决 Idea 卡在 Resolving问题

关于 Idea 卡在 Resolving&#xff08;前提是Maven的setting.xml中配置好了阿里云和仓库&#xff09; 参考文章https://blog.csdn.net/jiangyu1013/article/details/95042611 解决Maven爆红参考文章https://devpress.csdn.net/beijing/656d993b76f0791b6eca7bb0.html?dp_toke…

IP 电话

1 IP 电话概述 IP 电话是在互联网上传送多媒体信息。 多个英文同义词&#xff1a; VoIP (Voice over IP) Internet Telephony VON (Voice On the Net) 1.1 狭义的和广义的 IP 电话 狭义的 IP 电话&#xff1a;指在 IP 网络上打电话。 广义的 IP 电话&#xff1a;不仅仅是…

路由器端口映射如何配置?

在网络通信中&#xff0c;路由器是一个重要的设备&#xff0c;它负责将数据包从一个网络传输到另一个网络。路由器的端口映射配置是一种重要的设置&#xff0c;可以使外部网络中的计算机通过访问路由器上的特定端口与内部网络中的计算机进行通信。本文将介绍什么是路由器端口映…

24考研成绩查询时间已公布!附最全查分攻略!

2月26日早上9点起&#xff01; 2024考研初试成绩即将公布&#xff01; 考研初试成绩即将公布&#xff0c;同学们都在紧张地期待着自己的成绩。不同院校的成绩查询入口开通时间有所不同&#xff0c;具体时间请大家查看各自官网的通知。 成绩在哪查&#xff1f;怎么查&#xff1…

【力扣 - 爬楼梯】

题目描述 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 方法一&#xff1a;动态规划 思路和算法 我们用 f(x) 表示爬到第 x 级台阶的方案数&#xff0c;考虑最后一步可能跨了一级台阶&#…

LeetCode_Java_转变日期格式、种花问题(题目+思路+代码)

目录 1507. 转变日期格式 605.种花问题 1507. 转变日期格式 给你一个字符串 date &#xff0c;它的格式为 Day Month Year &#xff0c;其中&#xff1a; Day 是集合 {"1st", "2nd", "3rd", "4th", ..., "30th", "3…

Qt篇——QTableWidget保存表格数据到Excel文件中

代码如下&#xff1a; &#xff08;pro文件中添加QT axcontainer&#xff09; #include <QAxObject>void MainWindow::saveTableToExcel() {QDateTime current_date_time QDateTime::currentDateTime();QString excelName "data_" current_date_time.toSt…

Mysql 高可用解决方案

1.环境说明 操作系统&#xff1a;centos7.7 主服务器&#xff1a;node2(192.168.1.102) 从服务器&#xff1a;node3(192.168.1.103) keepalived中虚拟ip(VIP):192.168.1.100 2.准备事项 主库和从库数据库的版本一致把主库的数据同步给从库一份 3.主库配置 3.1 编辑MySQL配…

ETL是什么

一、ETL概念 ETL&#xff0c;是英文Extract-Transform-Load的缩写&#xff0c;用来描述将数据从来源端经过抽取&#xff08;extract&#xff09;、转换&#xff08;transform&#xff09;、加载&#xff08;load&#xff09;至目的端的过程。ETL一词较常用在数据仓库&#xff…

Gemma谷歌(google)开源大模型微调实战(fintune gemma-2b)

Gemma-SFT Gemma-SFT(谷歌, Google), gemma-2b/gemma-7b微调(transformers)/LORA(peft)/推理 项目地址 https://github.com/yongzhuo/gemma-sft全部weights要用fp32/tf32, 使用fp16微调十几或几十的步数后大概率lossnan;(即便layer-norm是fp32也不行, LLaMA就没有这个问题, …

2024程序员容器化上云之旅-第2集-Ubuntu-WSL2-Windows11版:接近深洞

故事梗概 Java程序员马意浓在互联网公司维护老旧电商后台系统。 渴望学习新技术的他在工作中无缘Docker。 他开始自学Vue3并使用SpringBoot3完成了一个前后端分离的Web应用系统&#xff0c;并打算将其用Docker容器化后用K8s上云。 3 挑选工具 马意浓画好架构图后&#xff…

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

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

SwiftUI中Toggle与Slider的使用

在SwiftUI中&#xff0c;Toggle和Slider是两个常用的UI控件&#xff0c;可以用来添加开关和滑块功能。 Toggle() Toggle控件用于在打开和关闭之间切换。可以使用Toggle来创建一个简单的开关&#xff0c;代码如下&#xff1a; State private var isOn falsevar body: some V…

牛客前端八股文

1.说说HTML语义化&#xff1f; 得分点&#xff1a;语义化标签、利于页面内容结构化、利于无CSS页面可读、利于SEO、利于代码可读 1&#xff0c;标签语义化是指在开发时尽可能使用有语义的标签&#xff0c;比如header&#xff0c;footer&#xff0c;h&#xff0c;p&#xff0c…