el-table 指定表格合并行与单元格，以及表头合并单元格

 

 

1：页面html

<template><div class="container"><div class="flex-end"><el-button type="primary" @click="allEndBtn">批量办结</el-button><el-button type="primary" @click="downLoadBtn">导出</el-button><el-button type="primary" @click="printBtn">打印</el-button><el-button type="primary" @click="backBtn">返回</el-button></div><div class="flex-center red lineH40 fontSize16">生成汇总签单成功，可到汇总签单数据列表查看审批情况</div><div class="lineH30"><div class="flex-center fontSize18">{{tableTitle}}</div> <div class="flex-center fontSize18">{{ tableName }}</div><div class="flex-center fontSize12">填单日期:{{ tableCreatTime }}</div></div> <div class="" ref="hzqdREF"><div class="flex-end">编号：{{ codeNum }}</div><el-table:data="tableData":span-method="objectSpanMethod"borderstyle="width: 100%; margin-bottom: 20px":header-cell-style="headerCellStyle":cell-style="{textAlign:'center'}"><el-table-columnprop="label"label="会签项目"width="150"><template slot-scope="scope"><div v-if="scope.$index==3">{{ scope.row.label }}</div> <div v-else>{{ scope.row.label }}</div></template></el-table-column><el-table-columnprop=""label=""width="60"><template slot-scope="scope"><div v-if="scope.$index==3">小写</div><div v-else-if="scope.$index==4">大写</div><div v-else>{{ scope.row.labelLater }}</div></template></el-table-column><el-table-column min-width="160"prop="labelLater":label="tableObj.projectName"><template slot-scope="scope"><div v-if="scope.$index==3||scope.$index==4">{{ scope.row.labelLater }}</div><div v-else>{{ scope.$index+1 }}</div></template></el-table-column><el-table-columnwidth="60"prop="index"label="序号"><template slot-scope="scope"><div v-if="scope.$index==3||scope.$index==4">{{ scope.$index+1 }}</div><div class="flex" v-else><div>{{ scope.row.unit }}</div> <div><div class="backTag " v-if="scope.row.backed==1"><div class="sanJiao"></div><div class="backColor">有退回</div></div></div></div></template></el-table-column><el-table-columnmin-width="260"prop="unit"label="单位/内容"><template slot-scope="scope"><div class="flex" v-if="scope.$index==3||scope.$index==4"><div>{{ scope.row.unit }}</div> <div><div class="backTag " v-if="scope.row.backed==1"><div class="sanJiao"></div><div class="backColor">有退回</div></div></div></div><div v-else>{{ scope.row.amount }}</div></template></el-table-column><el-table-columnwidth="120"prop="amount"label="金额"><template slot-scope="scope"><div v-if="scope.$index==3||scope.$index==4">{{ scope.row.amount }}</div><div v-else></div></template></el-table-column></el-table></div><div v-if="bottomTableData.length>0" ref="bottomTableREF"><el-tableclass="margin-B30" v-loading="loading":data="bottomTableData":border="true"style="width: 100%":header-cell-style="{textAlign:'center'}":cell-style="{textAlign:'center'}"><el-table-column fixed label="处理人" width="100"><template slot-scope="scope">{{ scope.row.userName }}</template></el-table-column><el-table-column fixed label="处理单位" width="200"><template slot-scope="scope">{{ scope.row.unitName }}</template></el-table-column><el-table-column fixed label="处理时间" width="100"><template slot-scope="scope">{{ scope.row.creatTime }}</template></el-table-column><el-table-column fixed label="付款申请编号" width="160"><template slot-scope="scope">{{ scope.row.paymentCode }}</template></el-table-column><el-table-column fixed label="申请金（元）" width="130"><template slot-scope="scope">{{ scope.row.applyAmount }}</template></el-table-column><el-table-column fixed label="处理意见" min-width="240"><template slot-scope="scope">{{ scope.row.opinion }}</template></el-table-column></el-table></div></div>
</template>

2：js部分

<script>
import { downloadPdf, printPdf } from "@/utils/index";
import { numberToQianFenWei } from "@/utils/qianFenWei.js";
export default {data () {return {tableTitle:"上海申通地铁建设集团有限公司",tableName:"工程项目汇总签单",tableCreatTime:"2023年06月10日",codeNum:"",mergeObj: {}, // 用来记录需要合并行的下标// 表格中的列名tableProps: ['label','labelLater','index','unit','amount',] ,tableData: [],tableObj:{projectName:"会签项目111",// 会签项目paymentDate:"支付日期22",// 支付日期allcCountersign:"会签总笔数33",// 会签总笔数dataList:"单据数量44",// 单据数量countersignAllAmount:"11111",// 会签总金额countersignAllAmountDX:"十一元整",// 会签总金额CWFZRsign:"财务负责人签字",// 财务负责人签字JTDSZsign:"集团董事长签字",// 集团董事长签字},loading:false,bottomTableData:[{}],};},watch:{"tableData":function (newVal,oldVal){if(newVal.length>0){this.getSpanArr(this.tableData);}}},created () {// setTimeout(()=>{this.getData();},1000)},computed: {// 千分位元 保留两位小数QFWYBLLWXS(){return (val) => {if(val===null||val===""){return "";}else if(val==="0"||val===0){return "0.00";}else{let LiangWeiXaioShu=(val-0).toFixed(2);if( isNaN(LiangWeiXaioShu)){return "";}else{if(LiangWeiXaioShu>=0){return numberToQianFenWei(LiangWeiXaioShu);}else{return "-"+numberToQianFenWei(String(LiangWeiXaioShu).slice(1));}} }}}},methods:{// 批量办结allEndBtn(){},// 导出downLoadBtn(){downloadPdf(this.$refs["refsPayOrderListTable"],this.tableTitle + this.tableName,"1300px",this.codeNum,{textAlign: "left",font: "30px Vedana",x: 10,conHeight: 500,conWidth: 600,});if(this.$refs["bottomTableREF"]){downloadPdf(this.$refs["bottomTableREF"],this.tableTitle + this.tableName + '意见',"1300px",this.codeNum,{textAlign: "left",font: "30px Vedana",x: 10,conHeight: 500,conWidth: 1000,});}},// 打印printBtn(){if(this.bottomTableData.length > 0){this.$refs["bottomTableREF"].style.width =  '1530px'printPdf([this.$refs["hzqdREF"],this.$refs["bottomTableREF"],],"","","1",this.codeNum,{textAlign: "left",font: "30px Vedana",x: 10,conHeight: 500,conWidth: 1000,});setTimeout(() => {this.$refs["bottomTableREF"].style.width =  ''}, 500)} else {printPdf([this.$refs["hzqdREF"]],"","","1",this.codeNum,{textAlign: "left",font: "30px Vedana",x: 10,conHeight: 500,conWidth: 1000,});}},// 返回backBtn(){this.$router.go(-1);},//表格头部样式headerCellStyle({ row, column, rowIndex, columnIndex }){// 第一步：设置表头的第0列暂不操作，将地1列和第2列隐去使其消失if ((columnIndex == 1)) {return { display: "none" };}// // 第二步， 由于1、2列没有了，后续列就会贴上来（后续列往左错位问题）if ((rowIndex == 0) & (columnIndex == 0)) {// 解决后续列错位问题，就是将隐去的第1列的位置再补上，通过第0列来补this.$nextTick(() => {/*原来第0列只占据一个位置，现在要去占据两个位置。即占据两列，即设置为横向两个单元格*/ document.querySelector(`.${column.id}`).setAttribute("colspan", "2");/*这里的column.id实际是dom元素的class，故用点.不用井#，可审查dom验证所以 --通过设置原生的colspan属性，让原来的第一列只占据一个单元格的表头占据2个单元格即可*/  });}return { textAlign:'center',backgroundColor:"white", }},// getSpanArr方法getSpanArr(data) {this.tableProps.forEach(propVal=> {let count = 0; // 用来记录需要合并行的起始位置this.mergeObj[propVal] = []; // 记录每一列的合并信息data.forEach((item, index) => {// index == 0表示数据为第一行，直接 push 一个 1if(index === 0) {this.mergeObj[propVal].push(1);} else {/*判断当前行是否与上一行其值相等如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位*/  if(item[propVal] === data[index - 1][propVal]) { this.mergeObj[propVal][count] += 1;this.mergeObj[propVal].push(0);} else {// 如果当前行和上一行其值不相等 count = index; // 记录当前位置 this.mergeObj[propVal].push(1); // 重新push 一个 1}}})})},// objectSpanMethod方法/*默认接受四个值----row==当前行的数据----column==当前列的数据----rowIndex==行的下标----columnIndex==列的下标*/objectSpanMethod({ row, column, rowIndex, columnIndex }) {// 只有 第一列  合并行if(columnIndex===0){// 判断列的属性if(this.tableProps.indexOf(column.property) !== -1) {// 判断其值是不是为0 if(this.mergeObj[column.property][rowIndex]) { return {rowspan: this.mergeObj[column.property][rowIndex],colspan: rowIndex===3?1: 2};} else {// 如果为0则为需要合并的行return {rowspan: 0,colspan: 0}; }}}},// 获取表格数据getData(){this.tableData=[];//{},{},{},{},{},{},{},{},{}, {unit:"a阿萨达"}this.tableData=[];if(this.tableData.length<10){let zeroData={label:"支付日期",labelLater:this.tableObj.paymentDate,unit:this.tableData[0]!=undefined?this.tableData[0].unit:"阿达阿达是的",backed:this.tableData[0]!=undefined?this.tableData[0].backed:"1",amount:this.tableData[0]!=undefined?this.tableData[0].amount:""};let oneData={label:"会签总笔数",labelLater:this.tableObj.allcCountersign,unit:this.tableData[1]!=undefined?this.tableData[1].unit:"阿达阿达是的阿达阿达是",backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",amount:this.tableData[1]!=undefined?this.tableData[1].amount:""};let twoData={label:"单据数量",labelLater:this.tableObj.dataList,unit:this.tableData[2]!=undefined?this.tableData[2].unit:"",backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",amount:this.tableData[2]!=undefined?this.tableData[2].amount:""};let threeData={label:"会签总金额",labelLater:this.QFWYBLLWXS(this.tableObj.countersignAllAmount),unit:this.tableData[3]!=undefined?this.tableData[3].unit:"",backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",amount:this.tableData[3]!=undefined?this.tableData[3].amount:""};let fourData={label:"会签总金额",labelLater:this.tableObj.countersignAllAmountDX,unit:this.tableData[4]!=undefined?this.tableData[4].unit:"",backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",amount:this.tableData[4]!=undefined?this.tableData[4].amount:""};let fiveData={label:"财务负责人",labelLater:this.tableObj.CWFZRsign,unit:this.tableData[5]!=undefined?this.tableData[5].unit:"",backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",amount:this.tableData[5]!=undefined?this.tableData[5].amount:""};let sixData={label:"集团董事长",labelLater:this.tableObj.JTDSZsign,unit:this.tableData[6]!=undefined?this.tableData[6].unit:"",backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",amount:this.tableData[6]!=undefined?this.tableData[6].amount:""};let sevenData={label:"网银录入",labelLater:"",unit:this.tableData[7]!=undefined?this.tableData[7].unit:"",backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",amount:this.tableData[7]!=undefined?this.tableData[7].amount:""};let eightData ={label:"网银复核",labelLater:"",unit:this.tableData[8]!=undefined?this.tableData[8].unit:"",backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",amount:this.tableData[8]!=undefined?this.tableData[8].amount:""};this.tableData.splice(0,1,zeroData);this.tableData.splice(1,1,oneData);this.tableData.splice(2,1,twoData);this.tableData.splice(3,1,threeData);this.tableData.splice(4,1,fourData);this.tableData.splice(5,1,fiveData);this.tableData.splice(6,1,sixData);this.tableData.splice(7,1,sevenData);this.tableData.splice(8,1,eightData);console.log("少于9条数据========",this.tableData)}else{this.addArrPoperty(this.tableData,0,"支付日期",this.tableObj.paymentDate);this.addArrPoperty(this.tableData,1,"会签总笔数",this.tableObj.allcCountersign);this.addArrPoperty(this.tableData,2,"单据数量",this.tableObj.dataList);this.addArrPoperty(this.tableData,3,"会签总金额",this.QFWYBLLWXS(this.tableObj.countersignAllAmount));this.addArrPoperty(this.tableData,4,"会签总金额",this.tableObj.countersignAllAmountDX);this.addArrPoperty(this.tableData,5,"财务负责人",this.tableObj.CWFZRsign);this.addArrPoperty(this.tableData,6,"集团董事长",this.tableObj.JTDSZsign);this.addArrPoperty(this.tableData,7,"网银录入","");this.addArrPoperty(this.tableData,8,"网银复核","");console.log("多于9条数据========",this.tableData)}},addArrPoperty(arr,index,label,labelLater){arr[index].label=label;arr[index].labelLater=labelLater;},}
}
</script>

3：样式

<style scoped>.red{color: red;}.lineH40{line-height: 40px;}.lineH30{line-height: 30px;}.fontSize16{font-size: 16px;}.fontSize18{font-size: 18px;font-weight: 500;}.fontSize12{font-size: 12px;font-weight: 600;}table {border-spacing: 0;border-collapse: collapse;border: 1px solid #7f7f7f;width: 100%;margin-bottom: 30px;}table td {padding: 8px;border: 1px solid #7f7f7f;text-align: center;min-width: 80px;min-height: 30px;}.headStyle td{text-align: center; font-weight: 600;}.margin-B30{margin-bottom: 30px;}.backTag{margin-left: 3px;display: flex;justify-content: center;align-items: center;}.sanJiao{content:"";border:11px solid red;border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;width:0px;height:0px;}.backColor{border: none;background-color: red;padding-right: 5px;color: white;}
</style>

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

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

相关文章

探讨：围绕 props 阐述 React 通信

探讨：围绕 props 阐述 React 通信

在 ✓ &#x1f1e8;&#x1f1f3; 开篇&#xff1a;通过 state 阐述 React 渲染 中&#xff0c;以 setInterval 为例&#xff0c;梳理了 React 渲染的相关内容。 &#x1f4e2; 本篇会 ✓ &#x1f1e8;&#x1f1f3; 围绕 props 阐述 React 通信 props React 组件使用 pro…
阅读更多...
【Java程序员面试专栏 算法思维】一 高频面试算法题：排序算法

【Java程序员面试专栏 算法思维】一 高频面试算法题：排序算法

一轮的算法训练完成后，对相关的题目有了一个初步理解了，接下来进行专题训练，以下这些题目就是汇总的高频题目，本篇主要聊聊排序算法，包括手撕排序算法，经典的TOPK问题以及区间合并，所以放到一篇Blog中集中练习 题目关键字解题思路时间空间快速排序双指针+递归+基准值分…
阅读更多...
【数据结构】单链表解析+完整代码（插入、删除、尾插法、头插法、按值和按位查找、前插和后插）带头结点和不带两种实现

【数据结构】单链表解析+完整代码（插入、删除、尾插法、头插法、按值和按位查找、前插和后插）带头结点和不带两种实现

文章目录 3.1 单链表3.1.1 单链表的定义3.1.2 单链表的插入A.按位序插入&#xff08;带头结点&#xff09;B.按位序插入&#xff08;不带头结点&#xff09;C.指定结点的后插操作D.指定结点的前插操作 3.1.3 单链表的删除A.按位序删除B.删除指定结点 3.1.4 单链表的查找A.按位查…
阅读更多...
亚马逊云科技实时 AI 编程助手 Amazon CodeWhisperer，开发快人一步

亚马逊云科技实时 AI 编程助手 Amazon CodeWhisperer，开发快人一步

​ ​ Amazon CodeWhisperer 是一款 AI 编码配套应用程序&#xff0c;可在 IDE 中生成 整行代码和完整的函数代码建议&#xff0c;以帮助您更快地完成更多工作。在本系列 文章中&#xff0c;我们将为您详细介绍 Amazon CodeWhisperer 的相关信息&#xff0c;敬请 关注&#xff…
阅读更多...
代理IP安全问题：在国外使用代理IP是否安全

代理IP安全问题：在国外使用代理IP是否安全

目录 前言 一、国外使用代理IP的安全风险 1. 数据泄露 2. 恶意软件 3. 网络攻击 4. 法律风险 二、保护国外使用代理IP的安全方法 1. 选择可信的代理服务器 2. 使用加密协议 3. 定期更新系统和软件 4. 注意网络安全意识 三、案例分析 总结 前言 在互联网时代&…
阅读更多...
微信小程序固定头部-CSS实现

微信小程序固定头部-CSS实现

效果图 代码逻辑&#xff1a;设置头部的高度&#xff0c;浮动固定后&#xff0c;再加个这个高度的大小的外边距 .weui-navigation-bar {position: fixed;top: 0px;left: 0px;right: 0px;height:90px; } .weui-navigation-bar_bottom{height:90px; }
阅读更多...
基于视觉识别的自动采摘机器人设计与实现

基于视觉识别的自动采摘机器人设计与实现

一、前言 1.1 项目介绍 【1】项目功能介绍 随着科技的进步和农业现代化的发展&#xff0c;农业生产效率与质量的提升成为重要的研究对象。其中&#xff0c;果蔬采摘环节在很大程度上影响着整个产业链的效益。传统的手工采摘方式不仅劳动强度大、效率低下&#xff0c;而且在劳…
阅读更多...
Redis 协议与异步方式

Redis 协议与异步方式

redis pipeline 模式 redis pipeline 是一个客户端提供的机制&#xff0c;与 redis 无关。pipeline 不具备事务性。目的&#xff1a;节约网络传输时间。通过一次发送多条请求命令&#xff0c;从而减少网络传输时间。 时间窗口限流 系统限定某个用户的某个行为在指定的时间范围…
阅读更多...
Laravel - API 项目适用的图片验证码

Laravel - API 项目适用的图片验证码

1. 安装 gregwar/captcha 图片验证码接口的流程是&#xff1a; 生成图片验证码 生成随机的 key&#xff0c;将验证码文本存入缓存。 返回随机的 key&#xff0c;以及验证码图片 # 不限于 laravel 普通 php 项目也可以使用额 $ composer require gregwar/captcha2. 开发接口 …
阅读更多...
精品基于SpringBoot的体育馆场地预约赛事管理系统的设计与实现-选座

精品基于SpringBoot的体育馆场地预约赛事管理系统的设计与实现-选座

《[含文档PPT源码等]精品基于SpringBoot的体育馆管理系统的设计与实现[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; Java——涉及技术&#xff1a; 前端使用技术&#…
阅读更多...
【Linux】实时查看服务器信息

【Linux】实时查看服务器信息

查看服务器CPU使用率 使用命令mpstat 1。这里的1表示每隔1秒更新一次CPU使用率。如果系统未安装mpstat&#xff0c;可以通过安装sysstat包来获取它。 在基于Debian的系统&#xff08;如Ubuntu&#xff09;上&#xff0c;使用命令&#xff1a; sudo apt-get update sudo apt-…
阅读更多...
刷题笔记 洛谷 P1162 填涂颜色

刷题笔记 洛谷 P1162 填涂颜色

思路来自 大佬 hat.openai.com/c/9c30032e-5fb9-4677-8c15-9ea6530dc6db 题目链接 P1162 填涂颜色 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路 搜索 首先 在外面围上一圈0开始搜素 因为题目说将封闭区域内的0变成2 我们可以在外面进行搜索 把外面所有可以搜索…
阅读更多...
单片机烧录方式 -- IAP、ISP和ICP

单片机烧录方式 -- IAP、ISP和ICP

目录 背景 1 什么是ICP 2 什么是ISP 3 什么是IAP 4 总结 背景 对于51单片机&#xff0c;我们使用STC-ISP上位机软件通过串口进行程序的烧写&#xff1b;对于STM32系列单片机&#xff0c;我们既可以通过串口烧写程序&#xff0c;也能通过JLink或是STLink进行程序的烧写&am…
阅读更多...
ONLYOFFICE桌面编辑器v8.0完整指南：安装、特点与新增功能

ONLYOFFICE桌面编辑器v8.0完整指南：安装、特点与新增功能

文章目录 摘要引言安装主界面可填写的 PDF 表单双向文本支持电子表格中的新增功能其他改进与Moodle集成用密码保护PDF文件从“开始”菜单快速创建文档本地界面主题安装免费的 ONLYOFFICE桌面编辑器 总结 摘要 本文介绍了ONLYOFFICE桌面编辑器v8.0的安装、主界面特点以及新增功…
阅读更多...
PID闭环控制算法的学习与简单使用

PID闭环控制算法的学习与简单使用

平台&#xff1a;matlab2021b&#xff0c;Vivado2018 应用场景和理解 一个早餐店&#xff0c;假如一天都有生意&#xff0c;生意有的时间很火爆&#xff0c;有时候又一般&#xff0c;老板又是个实在人&#xff0c;只知道在后厨蒸包子。由于包子蒸熟需要一定的时间&#xff0c;老…
阅读更多...
面试数据库篇（mysql）- 12分库分表

面试数据库篇（mysql）- 12分库分表

拆分策略 垂直分库 垂直分库：以表为依据，根据业务将不同表拆分到不同库中。 特点： 按业务对数据分级管理、维护、监控、扩展在高并发下，提高磁盘IO和数据量连接数垂直分表：以字段为依据，根据字段属性将不同字段拆分到不同表中。 特点： 1，冷热数据分离 2，减少IO过渡争…
阅读更多...
Qt中tableView控件的使用

Qt中tableView控件的使用

tableView使用注意事项 tableView在使用时&#xff0c;从工具栏拖动到底层页面后&#xff0c;右键进行选择如下图所示&#xff1a; 此处需要注意的是&#xff0c;需要去修改属性&#xff0c;从UI上修改属性如下所示&#xff1a; 也可以通过代码修改属性&#xff1a; //将其设…
阅读更多...
[项目]深度估计增强的多目标跟踪

[项目]深度估计增强的多目标跟踪

去年10月开始到年底&#xff0c;做了一个小工作&#xff0c;就是将自监督单目深度估计与MOT结合&#xff0c;目的是充分利用深度信息解决遮挡问题&#xff0c;并且在估计深度的同时可以估计相机位姿&#xff0c;这是可以计算出相邻两帧像素的映射。这在视角较大变化下比较有用。…
阅读更多...
OpenCV实现目标追踪

OpenCV实现目标追踪

目录 准备工作 语言&#xff1a; 软件包&#xff1a; 效果演示 代码解读 &#xff08;1&#xff09;导入OpenCV库 &#xff08;2&#xff09;使用 cv2.VideoCapture 打开指定路径的视频文件 &#xff08;3&#xff09;使用 vid.read() 读取视频的第一帧&#xff0c;ret…
阅读更多...
MyBatis 学习（一）之 MyBatis 概述

MyBatis 学习（一）之 MyBatis 概述

目录 1 MyBatis 介绍 2 MyBatis 的重要组件 3 MyBatis 执行流程 4 参考文档 1 MyBatis 介绍 MyBatis 是一个半自动化的 ORM &#xff08;Object-Relational Mapping&#xff0c;对象关系映射&#xff09;持久层框架&#xff0c;它允许开发者通过 XML 或注解将对象与数据库中…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023