el-table实现合并特定列的所有行

el-table实现合并特定列的所有行

示例:
在这里插入图片描述
在这里插入图片描述

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {if (columnIndex === 5 || columnIndex === 7) {// 就是只保留第一行,其他直接不要,然后行数是列表长度if (rowIndex === 0) {let rowspan = tableData.value.lengthreturn {rowspan,colspan: 1};} else {return {rowspan: 0,colspan: 0};}}
};
const tableData = ref([{id: '12987122',shopName: 'xxxxxxxxxxx',sommoditySpecificate: '090909090909090909',shopPrice: '100.00',pruchaseCount: '100',purchaseContract: '2024年第一季度采购合同计划',totalPrice: '1000',attachement: 'img1.png'},{id: '12987122',shopName: 'xxxxxxxxxxx',sommoditySpecificate: '090909090909090909',shopPrice: '100.00',pruchaseCount: '100',purchaseContract: '2024年第一季度采购合同计划',totalPrice: '1000',attachement: 'img1.png'},{id: '12987122',shopName: 'xxxxxxxxxxx',sommoditySpecificate: '090909090909090909',shopPrice: '100.00',pruchaseCount: '100',purchaseContract: '',totalPrice: '1000',attachement: 'img1.png'},{id: '12987122',shopName: 'xxxxxxxxxxx',sommoditySpecificate: '090909090909090909',shopPrice: '100.00',pruchaseCount: '100',purchaseContract: '',totalPrice: '1000',attachement: 'img1.png'},{id: '12987122',shopName: 'xxxxxxxxxxx',sommoditySpecificate: '090909090909090909',shopPrice: '100.00',pruchaseCount: '100',purchaseContract: '',totalPrice: '1000',attachement: 'img1.png'},])
<el-table:data="tableData":span-method="objectSpanMethod"stripeclass="isTop":header-row-style="{height:'50px',backgroundColor: 'rgba(250,250,252,1)',color: '#0D0D2E'}"><el-table-column type="index" label="序号" width="60" /><el-table-column prop="shopName" label="商品名称" /><el-table-column prop="sommoditySpecificate" label="商品规格" /><el-table-column prop="shopPrice" label="商品单价(元)"><template #default="scope"><div>¥{{ scope.row.shopPrice ? parseFloat(scope.row.shopPrice).toFixed(2) : 'N/A' }}</div></template></el-table-column><el-table-column prop="pruchaseCount" label="采购数量(个)" /><el-table-column prop="purchaseContract" label="采购合同" /><el-table-column label="总价"><template #default="scope"><span>¥{{(Number(scope.row.pruchaseCount) * Number(scope.row.shopPrice).toFixed(2))}}</span></template></el-table-column><el-table-column label="总金额(元)"><template #default="scope"><span v-if="false">{{scope.row}}</span><span class="priceColor">¥{{ calculateTotalPrice() }}</span></template></el-table-column><el-table-column prop="attachement" label="附件" v-if="isShopType == 1" /></el-table>
在这里插入代码片

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

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

相关文章

2024年03月 Python(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试(1~6级)全部真题・点这里 一、单选题(共25题,共50分) 第1题 下列哪个命令,可以将2024转换成’2024’ 呢?( ) A:str(2024) B:int(2024) C:float(2024) D:bool(2024) 答案:A 本题考察的是str() 语句,将数字转换成字符串用到的是str() 语句。 …

Java:IO

首 java.io中有百万计的类&#xff0c;如何找到自己需要的部分&#xff1f; 流 IO涉及到一个“流”stream的概念&#xff0c;可以简单理解成数据从一个源头到一个目的地。明白数据从哪来&#xff0c;要到哪里去&#xff0c;数据流中是字节还是字符之后&#xff0c;才能找到自…

由于找不到d3dx9_39.dll,无法继续执行代码的5种解决方法

在现代科技发展的时代&#xff0c;电脑已经成为我们生活中不可或缺的一部分。然而&#xff0c;由于各种原因&#xff0c;我们可能会遇到一些电脑问题&#xff0c;其中之一就是“d3dx9_39.dll丢失”。这个问题可能会导致我们在运行某些游戏或应用程序时遇到错误提示&#xff0c;…

新品 | Forge® 1GigE IP67工业相机助力智能农业、食品和饮料行业

近日&#xff0c;51camera的合作伙伴Teledyne FLIR IIS推出Forge 1GigE IP67,它是Forge系列的最新工业相机&#xff0c;旨在在恶劣的工业环境中运行&#xff0c;同时确保高效的生产能力。Forge 1GigE IP67致力于为工厂自动化提供先进成像系统的最新产品。 Forge 1GigE IP67相机…

MyBatis多数据源配置与使用,基于ThreadLocal+AOP

导读 MyBatis多数据源配置与使用其一其二1. 引依赖2. 配置文件3. 编写测试代码4. 自定义DynamicDataSource类5. DataSourceConfig配置类6. AOP与ThreadLocal结合7. 引入AOP依赖8. DataSourceContextHolder9. 自定义注解UseDB10. 创建切面类UseDBAspect11. 修改DynamicDataSourc…

PTA 计算矩阵两个对角线之和

计算一个nn矩阵两个对角线之和。 输入格式: 第一行输入一个整数n(0<n≤10)&#xff0c;第二行至第n1行&#xff0c;每行输入n个整数&#xff0c;每行第一个数前没有空格&#xff0c;每行的每个数之间各有一个空格。 输出格式: 两条对角线元素和&#xff0c;输出格式见样例…

Android存储系统成长记

用心坚持输出易读、有趣、有深度、高质量、体系化的技术文章 本文概要 您一定使用过Context的getFileStreamPath方法或者Environment的getExternalStoragePublicDirectory方法&#xff0c;甚至还有别的方法把数据存储到文件中&#xff0c;这些都是存储系统提供的服务&#x…

PTA 判断两个矩阵相等

Peter得到两个n行m列矩阵&#xff0c;她想知道两个矩阵是否相等&#xff0c;请你用“Yes”&#xff0c;“No”回答她&#xff08;两个矩阵相等指的是两个矩阵对应元素都相等&#xff09;。 输入格式: 第一行输入整数n和m&#xff0c;表示两个矩阵的行与列&#xff0c;用空格隔…

修改元组元素

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 场景模拟&#xff1a;伊米咖啡馆&#xff0c;由于麝香猫咖啡需求量较大&#xff0c;库存不足&#xff0c;店长想把它换成拿铁咖啡。 实例08 将麝香猫…

chrome浏览器驱动下载

跑自动化的时候&#xff0c;需要打开谷歌浏览器&#xff0c;这个时候提示浏览器驱动找不到咋办呢&#xff1f; 1、网上搜索找到了这篇文章&#xff1a;https://www.cnblogs.com/laoluoits/p/17710501.html&#xff1b;按照文章介绍&#xff0c; 首先找到&#xff1a;CNPM Bin…

D - Permutation Subsequence(AtCoder Beginner Contest 352)

题目链接: D - Permutation Subsequence (atcoder.jp) 题目大意&#xff1a; 分析&#xff1a; 相对于是记录一下每个数的位置 然后再长度为k的区间进行移动 然后看最大的pos和最小的pos的最小值是多少 有点类似于滑动窗口 用到了java里面的 TreeSet和Map TreeSet存的是数…

解决 Spring Boot 应用启动失败的问题:Unexpected end of file from server

解决 Spring Boot 应用启动失败的问题&#xff1a;Unexpected end of file from server 博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的…

Spring AOP失效的场景事务失效的场景

场景一&#xff1a;使用this调用被增强的方法 下面是一个类里面的一个增强方法 Service public class MyService implements CommandLineRunner {private MyService myService;public void performTask(int x) {System.out.println("Executing performTask method&quo…

爬虫学习--15.进程与线程(2)

线程锁 当多个线程几乎同时修改某一个共享数据的时候&#xff0c;需要进行同步控制 某个线程要更改共享数据时&#xff0c;先将其锁定&#xff0c;此时资源的状态为"锁定",其他线程不能改变&#xff0c;只到该线程释放资源&#xff0c;将资源的状态变成"非锁定…

Linux如何设置共享文件夹

打开虚拟机->菜单->虚拟机设置->选项->共享文件夹->总是启用。点击添加按钮->弹出添加向导->点击浏览按钮&#xff0c;从windows中选择一个文件夹&#xff0c;确定即可。

[Windows] GIF动画、动图制作神器 ScreenToGif(免费)

ScreenToGif 是开源免费的 Gif 动画录制工具&#xff0c;小巧原生单文件&#xff0c;功能很实用。它有录制屏幕、录制摄像头、录制画板、图像编辑器等功能&#xff0c;可以将屏幕任何区域及操作过程录制成 GIF 格式的动态图像。保存前还可对 GIF 图像编辑优化&#xff0c;支持自…

研二学妹面试字节,竟倒在了ThreadLocal上,这是不要应届生还是不要女生啊?

一、写在开头 今天和一个之前研二的学妹聊天&#xff0c;聊及她上周面试字节的情况&#xff0c;着实感受到了Java后端现在找工作的压力啊&#xff0c;记得在18&#xff0c;19年的时候&#xff0c;研究生计算机专业的学生&#xff0c;背背八股文找个Java开发工作毫无问题&#x…

抖音里卖什么最赚钱?4个冷门的高利润商品,还有谁不知道!

哈喽~我的电商月月 做抖音小店的新手朋友&#xff0c;一定很想知道&#xff0c;在抖音里卖什么最赚钱&#xff1f; 很多人都会推荐&#xff0c;日常百货&#xff0c;小风扇&#xff0c;女装&#xff0c;宠物用品等等&#xff0c;这些商品确实很好做&#xff0c;你们可以试试 …

备忘录可以统计字数吗?备忘录里在哪查看字数?

在这个信息爆炸的时代&#xff0c;很多人喜欢使用备忘录app来记录生活中的点点滴滴。备忘录不仅可以帮助我们记事、安排日程&#xff0c;还能提醒我们完成各种任务&#xff0c;是我们日常生活中不可或缺的小助手。 然而&#xff0c;在使用备忘录时&#xff0c;有时我们会遇到需…

不用BookStack的企业都在用什么知识库软件

现如今&#xff0c;越来越多的企业使用知识库软件对企业内部知识进行管理。BookStack作为一款功能强大的开源知识库软件&#xff0c;成为很多企业的首选。但是还是有一部分人群认为BookStack不适合他们的企业那么他们都是在用什么别的知识库软件呢&#xff1f;LookLook同学今天…