element-plus(el-table)中summary-method和span-method用法详解

el-table官方文档

el-table属性名说明类型参数
summary-method自定义的合计计算方法Function

columns, data

span-method合并行或列的计算方法Functionrow, column, rowIndex, columnIndex

合并表格行(通用)

const mergeObj = ref({}); // 用来记录需要合并行的下标
const mergeArr = ref(["statename"]); // 表格中的要合并列名
const tableData=ref([]);//网格数据//修改网格数据源
const mergeFun=()=>{mergeArr.value.forEach((key, index1) => {let count = 0; // 用来记录需要合并行的起始位置mergeObj.value[key] = []; // 记录每一列的合并信息tableData.value.forEach((item, index) => {// index == 0表示数据为第一行,直接 push 一个 1if (index === 0) {mergeObj.value[key].push(1);} else {// 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位if (item[key] === data[index - 1][key]) {mergeObj.value[key][count] += 1;mergeObj.value[key].push(0);} else {// 如果当前行和上一行其值不相等count = index; // 记录当前位置mergeObj.value[key].push(1); // 重新push 一个 1}}});});
}const spanMethod = ({ row, column, rowIndex, columnIndex }) => {// 判断列的属性if (mergeArr.value.indexOf(column.property) !== -1) {// 判断其值是不是为0if (mergeObj.value[column.property][rowIndex]) {return [mergeObj.value[column.property][rowIndex], 1]} else {// 如果为0则为需要合并的行return [0, 0];}}
};//调用mergeFun()

合并表格底部行(“合计行”)中的某几列

const getSummaries = (param) => {const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if (index === 1) {sums[index] = "合计";return;} const values = data.map((item) => Number(item[column.property]));if (!values.every((value) => Number.isNaN(value))) {sums[index] = `${values.reduce((prev, curr) => {const value = Number(curr);if (!Number.isNaN(value)) {return prev + curr;} else {return prev;}}, 0)}`;} else {sums[index] = "";}});return sums;
};//合并列
const spanMethod = (row, column, rowIndex, columnIndex) => {nextTick(() => {if (table.value.$el) {let current = table.value.$el.querySelector(".el-table__footer-wrapper").querySelector(".el-table__footer");let cell = current.rows[0].cells;//修改样式cell[1].style.textAlign = "center";// 合并单元格cell[2].style.display = "none";cell[1].colSpan = "2";}});
};

持续更新中。。。

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

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

相关文章

Matlab实现DBO-BiTCN-BiGRU-Attention蜣螂算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测

下面是一个使用DBO-BiTCN-BiGRU-Attention(蜣螂算法优化双向时间卷积双向门控循环单元融合注意力机制)进行多变量回归预测的简化示例的Matlab代码。请注意,这只是一个示例,并且可能需要根据您的具体数据和问题进行适当的修改和调整…

网络编程2----UDP简单客户端服务器的实现

首先我们要知道传输层提供的协议主要有两种,TCP协议和UDP协议,先来介绍一下它们的区别: 1、TCP是面向连接的,UDP是无连接的。 连接的本质是双方分别保存了对方的关键信息,而面向连接并不意味着数据一定能正常传输到对…

【NLP】给Transformer降降秩,通过分层选择性降阶提高语言模型的推理能力

【NLP】给Transformer降降秩,通过分层选择性降阶提高语言模型的推理能力 文章目录 【自然语言处理-论文翻译与学习】序1、导论2、相关工作3、相关工具4、方案5、实验5.1 使用 GPT-J 对 CounterFact 数据集进行彻底分析5.1.1 数据集中的哪些事实是通过降阶恢复的&…

使用谷歌 Gemini API 构建自己的 ChatGPT(一)

AI领域一直由OpenAI和微软等公司主导,而Gemini则崭露头角,以更大的规模和多样性脱颖而出。它被设计用于无缝处理文本、图像、音频和视频;这些基础模型重新定义了人工智能交互的边界。随着谷歌在人工智能领域强势回归,了解Gemini如…

oracle绑定执行计划测试

创建表 SQL> create table xytest as select * from dba_objects where object_id is not null;Table created. 查询数据 SQL> select count(*) from xytest;COUNT(*) ----------87577在object_id创建索引 SQL> create index idx_obj_id on xytest(object_id);Inde…

17.路由配置与页面创建

路由配置与页面创建 官网:https://router.vuejs.org/zh/ Vue Router 和 组合式 API | Vue Router (vuejs.org) 1. 修改index.ts import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router"; import Layout from /layout/Index.vueco…

中国版Sora?快手「可灵」到底行不行?

“可灵”与Sora有相似的技术架构,生成的视频动作流畅、幅度大,对物理世界理解力与还原度很高。可生成120秒、每秒30帧的高清视频,分辨率高达1080p,并且支持多种不同的屏幕比例。 “中国版SORA”到底是不是名副其实?能…

【Android面试八股文】1. 你说一说Handler机制吧 2. 你知道Handler的同步屏障吗? 3. Looper一直在循环,会造成阻塞吗?为什么?

文章目录 一. 你说一说Handler机制吧二、你知道Handler的同步屏障吗?2.1 Handler消息的分类2.2 什么是同步屏障2.3 为什么要设计同步屏障2.4 同步屏障的用法 三、Looper一直在循环,会造成阻塞吗?为什么?扩展阅读 一. 你说一说Hand…

YASKAWA机器人HW1171921-B电缆维修

安川机器人作为现代工业自动化的重要设备,其稳定运行对于生产线的连续性和效率至关重要。然而,随着使用时间的增长,可能会出现各种YASKAWA机器人本体线缆故障,如断线、短路、接触不良等。 一、安川工业机器人电缆维修前的准备 在进…

leetcode打卡#day43 携带研究材料(第六期模拟笔试)、416. 分割等和子集

携带研究材料&#xff08;第六期模拟笔试&#xff09; #include<iostream> #include<algorithm> #include<vector>using namespace std;int getMaxValue(vector<int>& weights, vector<int>& values, int n, int m) {vector<vector&…

2024/06/13--代码随想录算法2/17| 62.不同路径、63. 不同路径 II、343. 整数拆分 (可跳过)、96.不同的二叉搜索树 (可跳过)

62.不同路径 力扣链接 动态规划5步曲 确定dp数组&#xff08;dp table&#xff09;以及下标的含义&#xff1a; dp[i][j] &#xff1a;表示从&#xff08;0 &#xff0c;0&#xff09;出发&#xff0c;到(i, j) 有dp[i][j]条不同的路径。确定递推公式&#xff0c;dp[i][j] d…

vue3delete请求报403forbidden,前后端解决方式

在做开发时&#xff0c;前期已经在Controller类加上CrossOrigin(origins "*")&#xff0c;发送get和post请求都没问题&#xff0c;但遇到delete请求时&#xff0c;又报出跨域问题 一.前端添加proxy代理服务器&#xff08;未能解决&#xff09; 在vue.config.js中使…

热门开源项目推荐~商城系统mall项目详细介绍

Mall 项目是一个开源的电商系统&#xff0c;它包括前台商城系统和后台管理系统&#xff0c;主要基于 SpringBoot 和 MyBatis 进行实现&#xff0c;并采用 Docker 容器化部署1315161819。以下是对 Mall 项目的详细介绍&#xff1a; 项目概览 Mall 项目旨在提供一个高效、可扩展…

【面经总结】Java基础 - Java8 新特性

Java8 新特性 Java8 有什么新特性 Stream API&#xff1a;函数式编程思想&#xff0c;更方便处理集合、文件Optional 类&#xff1a;解决空指针异常Lambda 表达式&#xff1a;替代匿名内部类来实现函数式接口默认方法&#xff1a;接口中可以定义默认实现 Stream API Stream…

【Python入门与进阶】Python如何处理不同进制的数据

Python 提供了多种方法来处理不同进制的数据&#xff0c;包括二进制、八进制、十进制和十六进制。以下是一些常见的操作方式&#xff1a; 1. 进制转换 Python 内置了一些函数&#xff0c;可以方便地在不同进制之间进行转换。 1.1 从不同进制转换为十进制 二进制&#xff1a…

u-boot启动第一阶段 Start.S

从sram的uboot的第一阶段跳转到ddr下的uboot的第二阶段地址&#xff08;不直接从ram中完成uboot是因为ram空间有限&#xff09; 从start.s中构建异常向量表&#xff0c;然后到lowlevel中&#xff0c;然后完成2到7&#xff0c;之后再再ram中做栈重定位动作&#xff0c;建立mmu&a…

澳洲前端与后端开发的区别:深入解析两者之间的异同

澳洲前端与后端开发的区别&#xff1a;深入解析两者之间的异同 在澳洲的IT行业中&#xff0c;前端开发和后端开发是两个不可或缺的岗位。虽然它们都致力于构建出色的Web应用&#xff0c;但在职责、技术要求、工作方式和职业发展等方面却存在着显著的差异。本文将从四个方面、五…

Java概述与历史

引言 Java是一门广泛使用的编程语言&#xff0c;自1995年由Sun Microsystems发布以来&#xff0c;其平台无关性、稳定性和安全性使得它在软件开发领域中占据了重要地位。本文将详细介绍Java的起源与发展、核心理念、Java虚拟机&#xff08;JVM&#xff09;、版本演进等内容&…

嵌套查询(一)-谓词IN、量词ANY、量词ALL

一、在多个表之间进行数据查询&#xff0c;除了可以使用连接查询之外&#xff0c;也可以使用嵌套查询&#xff0c;那么什么是嵌套查询呢&#xff1f;如何使用嵌套查询呢&#xff1f; 1、将一个SELECT-FROM查询&#xff0c;嵌套在另一个SELECT查询语句中&#xff0c;那么这个SE…

C语言 | 文件操作(上)【必收藏】

文件操作&#xff08;上&#xff09; 1、使用文件的原因2、什么是文件3、二进制文件和文本文件4、 流的打开与关闭4.1 流和标准流4.1.1 流4.1.2 标准流 4.2 文件指针4.3 文件的打开和关闭 5、文件的顺序读写5.1 顺序读写函数介绍5.1.1 fputc与fgetc 1、使用文件的原因 首先来看…