el-table实现最后一行合计功能并合并指定单元格

news2024/11/21 11:10:04

效果图如下:
在这里插入图片描述
表格代码如下:

<el-table 
    width="100%"
    ref="tableRef" 
    style="margin-bottom: 15px;"
    :data="jlData"
    class="tableHeader6"
    header-row-class-name="headerStyleTr6"
    :row-class-name="tableRowClassName"
    show-summary
    :span-method="arraySpanMethod"
    >
        <el-table-column prop="staff_name" label="姓名"></el-table-column>
        <el-table-column prop="staff_id" label="工号"></el-table-column>
        <el-table-column prop="syjlTotal" label="使用量"></el-table-column>
        <el-table-column min-width="125px" prop="xzjlTotal" label="处理报告下载量"></el-table-column>
        <el-table-column min-width="125px" prop="cxbgTotal" label="撤销报告下载量"></el-table-column>
        <el-table-column min-width="110px" prop="lyTotal" label="录音下载量"></el-table-column>
</el-table>

在这里插入图片描述
在这里插入图片描述

const arraySpanMethod = ({ row, column, rowIndex, columnIndex }:any)=> {
		     nextTick(()=>{
		          if(tableRef.value.$el){
		              let current = tableRef.value.$el.querySelector(".el-table__footer-wrapper").querySelector(".el-table__footer")
		              // cell[0].innerHTML = '合计数'  修改文本
		              let cell = current.rows[0].cells
		              cell[0].style.textAlign = "center"; // 合计行第一列字段居中显示。
		              cell[1].style.display = "none"; // 隐藏被合并的单元格,不隐藏的话还会占着位置。
		              cell[0].colSpan = "2"; // 合并单元格个数
		              console.log(cell,'cell')
		              
		              //修改单元格的样式
		              for(let i=0;i<cell.length;i++){
		                  console.log(cell[i])
		                  if(i==0){
		                      cell[i].style.color = 'red'
		                  }else{
		                      cell[i].style.color = 'orange'
		                  }
		                  
		              }
		          }
		      })
    }

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

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

相关文章

【Amazon】亚马逊云科技Amazon DynamoDB 实践Amazon DynamoDB

Amazon DynamoDB 是一种完全托管的 NoSQL 数据库服务&#xff0c;专为高性能和可扩展性设计&#xff0c;特别适合需要快速响应和高吞吐量的应用场景&#xff0c;如移动应用、游戏、物联网和实时分析等。 工作原理 Amazon DynamoDB 在任何规模下响应时间一律达毫秒级&#xff…

基于arduino 用ESP8266获取实时MAX30102 血氧数据动态曲线显示在网页上

基于arduino 用ESP8266获取实时MAX30102 血氧数据动态曲线显示在网页上 原理&#xff1a; ESP8266获取MAX30102 血氧数据&#xff08;R,IR,G的值&#xff09;发送到路由器局域网内&#xff0c;局域网内的手机电脑&#xff0c;访问ESP的ip地址&#xff0c;获取实时的血氧数据动…

PostgreSQL常用时间函数与时间计算提取示例说明

文章目录 常用函数与常量to_timestamp(字符串转时间戳、数字转时间戳)date与to_date(字符串转日期、时间戳转日期)interval(时间计算)基本操作与格式混合运算 to_char(各种时间转字符串)extract(提取时间字段&#xff0c;年月日时分秒&#xff0c;周、季度&#xff0c;第几周、…

【MATLAB源码-第218期】基于matlab的北方苍鹰优化算法(NGO)无人机三维路径规划,输出做短路径图和适应度曲线.

操作环境&#xff1a; MATLAB 2022a 1、算法描述 北方苍鹰优化算法&#xff08;Northern Goshawk Optimization&#xff0c;简称NGO&#xff09;是一种新兴的智能优化算法&#xff0c;灵感来源于北方苍鹰的捕猎行为。北方苍鹰是一种敏捷且高效的猛禽&#xff0c;广泛分布于北…

Android Studio启动模拟器显示超时

问题报错: Timed out after 300seconds waiting for emulator to come online. 解决方案&#xff1a;升级Android Emulator 情况二&#xff1a;Error while waiting for device:AVD Pixel_4a_API_32 is already running. If that is not the case, delete the files at E:\An…

Stable Diffusion经典应用场景

&#x1f33a;系列文章推荐&#x1f33a; 扩散模型系列文章正在持续的更新&#xff0c;更新节奏如下&#xff0c;先更新SD模型讲解&#xff0c;再更新相关的微调方法文章&#xff0c;敬请期待&#xff01;&#xff01;&#xff01;&#xff08;本文及其之前的文章均已更新&…

linux 常用命令指南(存储分区、存储挂载、docker迁移)

前言&#xff1a;由于目前机器存储空间不够&#xff0c;所以‘斥巨资’加了一块2T的机械硬盘&#xff0c;下面是对linux扩容的一系列操作&#xff0c;包含了磁盘空间的创建、删除&#xff1b;存储挂载&#xff1b;docker迁移&#xff1b;anaconda3迁移等。 一、存储分区 1.1 …

AI时代,百度的三大主义

现实主义、长期主义、理想主义。 定焦One&#xff08;dingjiaoone&#xff09;原创 作者 | 苏琦 郑浩钧 编辑 | 魏佳 “人工智能很像是一次新的工业革命&#xff0c;这意味着它不会三五年就结束&#xff0c;也不会一两年就出现‘超级应用’&#xff0c;它更像是三五十年对于整…

服务器Docker OOM RSS高问题排查思路

优质博文&#xff1a;IT-BLOG-CN 防走弯路为防止走弯路&#xff0c;强烈建议先仔细阅读以下加粗内容&#xff1a; 如果你的应用是因为公司最近降成本调小实例物理内存才出现docker oom&#xff0c;而之前从来没有出现过&#xff0c;那么大概率是堆内存太大导致&#xff0c;这种…

Ubuntu Linux使用前准备动作_使用root登录图形化界面

Ubuntu默认是不允许使用 root 登录图形化界面的。这是出于安全考虑的设置。但如果有需要&#xff0c;可以通过以下步骤来实现使用 root 登录&#xff1a; 1、设置 root 密码 打开终端&#xff0c;使用当前的管理员账户登录系统。在终端中输入命令sudo passwd root&#xff0c…

core 不可变类型 线程安全 record

当一个类型的对象在创建时被指定状态后&#xff0c;就不会再变化的对象&#xff0c;我们称之为不可变类型。这种类型是线程安全的&#xff0c;不需要进行线程同步&#xff0c;非常适合并行计算的数据共享。它减少了更新对象会引起各种bug的风险&#xff0c;更为安全。 System.D…

Python-简单病毒程序合集(一)

前言&#xff1a;简单又有趣的Python恶搞代码&#xff0c;往往能给我们枯燥无味的生活带来一点乐趣&#xff0c;激发我们对编程的最原始的热爱。那么话不多说&#xff0c;我们直接开始今天的编程之路。 编程思路&#xff1a;本次我们将会用到os,paltform,threading,ctypes,sys,…

ForEach刷新UI机制

官网地址&#xff1a;ForEach 在ArkUI中&#xff0c;提供了ForEach循环语句&#xff0c;用来初始化一个列表数据&#xff0c;我们知道&#xff0c;当ForEach中的数组发生变化时&#xff0c;会引起UI的刷新&#xff0c;但是究竟如何变化&#xff0c;会引起UI怎样的刷新&#xf…

如何解决pdf.js跨域从url动态加载pdf文档

摘要 当我们想用PDF.js从URL加载文档时&#xff0c;将会因遇到跨域问题而中断&#xff0c;且是因为会触发了PDF.js和浏览器的双重CORS block&#xff0c;这篇文章将会介绍&#xff1a;①如何禁用pdf.js的跨域&#xff1f;②如何绕过浏览器的CORS加载URL文件&#xff1f;②如何使…

Three.js 相机控制器Controls

在 3D 场景中&#xff0c;摄像机的控制尤为重要&#xff0c;因为它决定了用户如何观察和与场景互动。Three.js 提供了多种相机控制器&#xff0c;最常用的有 OrbitControls、TrackballControls、FlyControls 和 FirstPersonControls。OrbitControls 适合用于查看和检查 3D 模型…

C++小白实习日记——Day 5 gitee怎么删文件,测试文件怎么写循环

昨晚一直内耗&#xff0c;一个程序写了三天写不出来&#xff0c;主要是耗时太多了&#xff0c;老板一直不满意。想在VScode上跑一下&#xff0c;昨晚一直报错。今天来公司重新搞了一下&#xff0c; 主要工作有&#xff1a; 1&#xff0c;读取当前时间用tscns 2&#xff0c;输…

【从零开始的LeetCode-算法】3301. 高度互不相同的最大塔高和

给你一个数组 maximumHeight &#xff0c;其中 maximumHeight[i] 表示第 i 座塔可以达到的 最大 高度。 你的任务是给每一座塔分别设置一个高度&#xff0c;使得&#xff1a; 第 i 座塔的高度是一个正整数&#xff0c;且不超过 maximumHeight[i] 。所有塔的高度互不相同。 请…

利用uniapp开发鸿蒙:运行到鸿蒙模拟器—踩坑合集

从uniapp运行到鸿蒙模拟器上这一步&#xff0c;就有非常多的坑&#xff0c;一些常见的坑&#xff0c;官网都有介绍&#xff0c;就不再拿出来了&#xff0c;这里记录一下官网未记录的大坑 1.运行路径从hbuilderx启动鸿蒙模拟器 解决方法&#xff1a; Windows系统&#xff0c;官…

基于UDP和TCP实现回显服务器

目录 一. UDP 回显服务器 1. UDP Echo Server 2. UDP Echo Client 二. TCP 回显服务器 1. TCP Echo Server 2. TCP Echo Client 回显服务器 (Echo Server) 就是客户端发送什么样的请求, 服务器就返回什么样的响应, 没有任何的计算和处理逻辑. 一. UDP 回显服务器 1. UD…

游戏引擎学习第17天

视频参考:https://www.bilibili.com/video/BV1LPUpYJEXE/ 回顾上一天的内容 1. 整体目标&#xff1a; 处理键盘输入&#xff1a;将键盘输入的处理逻辑从平台特定的代码中分离出来&#xff0c;放入更独立的函数中以便管理。优化消息循环&#xff1a;确保消息循环能够有效处理 …