Vue3 ElementPlus-table组件(合计)合并列

 在使用ElementPlus的table组件的时候,我们通常会处理合计,当遇到合计行需要合并列的时候,可以这样做。

 核心就是获取标签,对标签的CSS样式进行设置,以达到合并单元格的效果。

Template

		<el-tablemax-height="calc(100vh - 240px)"ref="tableRef"border:data="tableData"show-summary:span-method="spanMethod":header-cell-style="{ color: '#333', backgroundColor: '#f5f7fa', textAlign: 'center' }"style="width: 100%"align="center">

Script 

import { ref, nextTick } from "vue";
const table = ref();
const spanMethod = ({ row, column, rowIndex, columnIndex }: any) => {nextTick(() => {if (tableRef.value.$el) {let current = tableRef.value.$el.querySelector(".el-table__footer-wrapper").querySelector(".el-table__footer");let cell = current.rows[0].cells;cell[0].style.textAlign = "center"; // 合计行第一列字段居中显示。cell[1].style.display = "none";cell[0].colSpan = "2"; // 合并单元格}});
};

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

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

相关文章

软件实例,餐厅酒水寄存管理系统软件,酒水寄存登记表软件操作教程

软件实例&#xff0c;餐厅酒水寄存管理系统软件&#xff0c;酒水寄存登记表软件操作教程 一、前言 以下软件操作以 佳易王酒水寄存管理系统软件V16.0为例说明 件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 1、酒水寄存管理系统软件可以管理多个品类的物…

8. C++对象模型

1. 普通类对象是什么布局&#xff1f; struct Base {Base() default;~Base() default;void Func() {}int a;int b; };int main() {Base a;return 0; }2. 带虚函数的类对象是什么布局&#xff1f; struct Base {Base() default;virtual ~Base() default;void FuncA() {}v…

Unity类银河恶魔城学习记录10-1 10-2 P89,90 Character stats - Stat script源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Stat.cs using System.Collections; using System.Collections.Generic; us…

算法打卡day14|二叉树篇03|Leetcode 104.二叉树的最大深度、559.n叉树的最大深度、111.二叉树的最小深度、222.完全二叉树的节点个数

算法题 Leetcode 104.二叉树的最大深度 题目链接:104.二叉树的最大深度 大佬视频讲解&#xff1a;二叉树的最大深度视频讲解 个人思路 可以使用层序遍历&#xff0c;因为层序遍历会有一个层数的计算&#xff0c;最后计算到的层数就是最大深度&#xff1b; 解法 迭代法 就是…

Python:如何统计特定返回周期下的GEV分布值和实际观测值的超越概率?

处理数据样式如下&#xff1a; 01 reuturn_periods函数说明 def return_periods(data, years[10, 20, 30, 50, 80, 100]):data np.array(data) # data为ndarray格式# Fit the generalized extreme value distribution to the data.shape, loc, scale genextreme.fit(data)p…

代码随想录刷题笔记 Day 52 | 打家劫舍 No.198 | 打家劫舍 II No.213 | 打家劫舍III No.337

文章目录 Day 5201. 打家劫舍&#xff08;No. 198&#xff09;<1> 题目<2> 笔记<3> 代码 02. 打家劫舍 II&#xff08;No. 213&#xff09;<1> 题目<2> 笔记<3> 代码 03.打家劫舍III&#xff08;No. 337&#xff09;<1> 题目<2&g…

【学习】感受野

感受野&#xff08;receptive field&#xff09;是指在神经网络中&#xff0c;某一层输出的特征图上的一个像素点对应输入图像的区域大小。在深度神经网络中&#xff0c;随着网络层数的增加&#xff0c;特征图的感受野也会逐渐增大。这是因为每一层的卷积操作都会扩大感受野。 …

python面向对象的三大特性:封装,继承,多态

1、面向对象有哪些特性 三种&#xff1a;封装性、继承性、多态性 2、Python中的封装 在Python代码中&#xff0c;封装有两层含义&#xff1a; ① 把现实世界中的主体中的属性和方法书写到类的里面的操作即为封装 ② 封装可以为属性和方法添加为私有权限&#xff0c;不能直…

Flask学习(四):路由转换器

默认的路由转换器&#xff1a; string &#xff08;缺省值&#xff09; 接受任何不包含斜杠的文本int接受正整数float接受正浮点数 path类似 string&#xff0c;但可以包含斜杠uuid接受 UUID 字符串 代码示例&#xff1a; app.route(/user/<username>) def show_u…

50、东北大学、阿尔伯塔大学:Hi-GCN从2个层次角度进行图学习,用来诊断脑部疾病[你这和MVS-GCN套娃呢?]

本文由东北大学医学图像智能计算教育部重点实验室&#xff0c;加拿大阿尔伯塔大学于2020年10.24日发表于<Computers in Biology and Medicine> JCR\IF: Q1\7.7 Abstract&#xff1a; 目的:近年来&#xff0c;脑连接网络已被用于神经系统疾病的分类&#xff0c;如自闭症…

备战蓝桥杯Day27 - 省赛真题-2023

题目描述 大佬代码 import os import sysdef find(n):k 0for num in range(12345678,98765433):str1 ["2","0","2","3"]for x in str(num) :if x in str1:if str1[0] x:str1.pop(0)if len(str1) ! 0:k1print(k)print(85959030) 详…

vue防止用户连续点击造成多次提交

中心思想&#xff1a;在第一次提交的结果返回前&#xff0c;将提交按钮禁用。 方法一&#xff1a;给提交按钮加上disabled属性&#xff0c;在请求时先把disabled属性改成true&#xff0c;在结果返回时改成false 方法二&#xff1a;添加loading遮罩层&#xff0c;可以直接使用e…