vue3 table动态合并,自定义参数合并单元格

<template><div><el-table :data="tableData" :span-method="objectSpanMethod" border:header-cell-style="{ textAlign: 'center'}"><el-table-column prop="area" label="区域" align="center"></el-table-column><el-table-column prop="province" label="省份" align="center" /><el-table-column prop="month_1" label="一月" align="center" /><el-table-column prop="month_2" label="二月" align="center" /><el-table-column prop="month_3" label="三月" align="center" /></el-table></div>
</template><script lang="ts" setup>
import { ref, toRefs, reactive, nextTick, computed, watch, onMounted } from "vue";
const tableData = [// 一年级{area: "华北",province: "北京",month_1: "100",month_2: "张三",month_3: "90"},{area: "华北",province: "北京",month_1: "200",month_2: "张三",month_3: "90"},{area: "华北",province: "山西",month_1: "100",month_2: "张三",month_3: "90"},{area: "华北",province: "辽宁",month_1: "100",month_2: "张三",month_3: "90"},{area: "东北",province: "吉林",month_1: "100",month_2: "张三",month_3: "90"},{area: "东北",province: "黑2",month_1: "100",month_2: "张三",month_3: "90"},{area: "东北",province: "黑2",month_1: "100",month_2: "张三",month_3: "90"},{area: "东北",province: "黑2",month_1: "100",month_2: "张三",month_3: "90"},{area: "西北",province: "黑2",month_1: "100",month_2: "张三",month_3: "90"},{area: "西北",province: "西二",month_1: "100",month_2: "张三",month_3: "90"},{area: "西北",province: "西三",month_1: "100",month_2: "张三",month_3: "90"},]
//存储合并单元格的开始位置
const setTabelRowSpan = (tableData:any, fieldArr:any, effectMerge = {}) => {let lastItem = {}fieldArr.forEach((field:any, index:any) => {let judgeArr = fieldArr.slice(0, index + 1)//@ts-ignoreif (effectMerge[field]) {//@ts-ignorejudgeArr = [...effectMerge[field], field]console.log(judgeArr, "--==judgeAr2222");}tableData.forEach((item:any) => {item.mergeCell = fieldArrconst rowSpan = `rowspan_${field}`// 判断是否合并到上个单元格。//@ts-ignoreif (judgeArr.every((e:any) => lastItem[e] === item[e] && item[e] !== '')) {// 判断是否所在行的列对应的值全部相同,并且此列的值不为空// 是:合并行item[rowSpan] = 0//@ts-ignorelastItem[rowSpan] += 1} else {// 否:完成一次同类合并。lastItem重新赋值,进入下一次合并计算。item[rowSpan] = 1lastItem = item}})})
}//@ts-ignore
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {if (row.mergeCell.includes(column.property)) {const rowspan = row[`rowspan_${column.property}`]if (rowspan) {return { rowspan: rowspan, colspan: 1 }} else {return { rowspan: 0, colspan: 0 }}}
}
onMounted(()=>{const effectMerge = {month_1: ['area'],//一月参照区域进行合并month_3: ['area']//三月参照区域合并}const arr = ['area', 'province', 'month_1', 'month_2', 'month_3']//全部字段setTabelRowSpan(tableData, arr, effectMerge)// (表格数据,表格字段,合并的条件)
})
</script><style></style>

效果图:
在这里插入图片描述

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

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

相关文章

HW样本《关于“XXXX”微信视频号发布短视频的信息说明.exe》的逆向分析

一、概述 样本运行后会释放《关于“XXXX”微信视频号发布短视频的信息说明.doc》并打开&#xff1b;同时释放ncloud.exe恶意文件并启动&#xff1b;调用cmd命令删除样本母体&#xff1b;其中ncloud.exe会从互联网下载类似字母表的数据解密出CS木马&#xff0c;在内存加载并运行…

真就逮住23届了使劲薅呗,24届笑了

作者&#xff1a;阿秀 InterviewGuide大厂面试真题网站&#xff1a;https://top.interviewguide.cn 小伙伴们大家好&#xff0c;我是阿秀。 最近在朋友圈看到不少动态说"24届明显好转"的消息&#xff0c;也收到不少私信问是不是24届的相比于23届好多了&#xff0c;更…

深度学习阶段性回顾

本文针对过去两周的深度学习理论做阶段性回顾&#xff0c;学习资料来自吴恩达老师的2021版deeplearning.ai课程&#xff0c;内容涵盖深度神经网络改善一直到ML策略的章节。视频链接如下&#xff1a;吴恩达深度学习视频链接 &#xff08;注&#xff1a;本文出自深度学习初学者&a…

Vue中如何更好地封装组件?

子组件接受父组件传递的事件 1.子组件使用事件名"$emit(父组件中传递的事件名,想给父组件传递的参数(可选))" click"$emit(click)" 2.子组件使用 v-on"$listeners" 父组件&#xff1a; <template><div id"app"><myCo…

MyBatis的XML映射文件

Mybatis的开发有两种方式&#xff1a; 注解 XML配置文件 通过XML配置文件的形式来配置SQL语句&#xff0c;这份儿XML配置文件在MyBatis当中也称为XML映射文件。 导学&#xff1a;在MyBatis当中如何来定义一份儿XML映射文件&#xff1f; 在MyBatis当中&#xff0c;定义XML…

使用 HTML、CSS 和 JavaScript 创建多步骤表单

使用 HTML、CSS 和 JavaScript 创建多步骤表单 为了处理又长又复杂的表单&#xff0c;我们需要将它们分成多个步骤。通过一次只在屏幕上显示一些输入&#xff0c;表单会感觉更容易理解&#xff0c;并防止用户感到被大量的表单字段淹没。 在本文中&#xff0c;我将逐步指导如何…

基础堆排序(Java 实例代码)

目录 基础堆排序 一、概念及其介绍 二、适用说明 三、过程图示 四、Java 实例代码 src/runoob/heap/Heapify.java 文件代码&#xff1a; 基础堆排序 一、概念及其介绍 堆排序&#xff08;Heapsort&#xff09;是指利用堆这种数据结构所设计的一种排序算法。 堆是一个近…

Linux_5_Shell脚本编程

目录 1 基础1.1 程序组成1.2 程序编程风格1.3 编程语言1.4 编程逻辑处理方式 2 shell 脚本语言的基本结构2.1 shell脚本的用途2.2 shell脚本基本结构2.3 创建shell脚本过程2.4 脚本注释规范2.5 第一个脚本2.6 脚本调试2.7 变量2.7.1 变量2.7.2 变量类型2.7.3 编程语言分类2.7.4…

【MAC】 M2 brew安装 docker 运行失败 解决

MAC 安装 brew install --cask docker 之后一直显示docker: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?. 网上看了一些文章 发现 这个不适用于M2 所以要从官网上下载 docker 安装成功

C++ 动态规划经典案例解析之最长公共子序列(LCS)_窥探递归和动态规划的一致性

1. 前言 动态规划处理字符相关案例中&#xff0c;求最长公共子序列以及求最短编辑距离&#xff0c;算是经典中的经典案例。 讲解此类问题的算法在网上一抓应用一大把&#xff0c;即便如此&#xff0c;还是忍不住有写此文的想法。毕竟理解、看懂都不算是真正掌握&#xff0c;唯…

多线程与并发编程面试题总结

多线程与并发编程 多线程 线程和进程的区别&#xff1f; 从操作系统层面上来讲&#xff1a;进程(process)在计算机里有单独的地址空间&#xff0c;而线程只有单独的堆栈和局部内存空间&#xff0c;线程之间是共享地址空间的&#xff0c;正是由于这个特性&#xff0c;对于同…

vscode debug python 带参数

两种方法 第一种&#xff1a; 1&#xff0c;侧边栏选择运行和调试 2&#xff0c;请先创建一个launch.json文件 3&#xff0c;并选择配置文件为python文件 此时你的工作目录下会多一个目录.vscode和该目录下一个launch.json文件&#xff0c;该文件则配置了你的debug配置。在…

【报错】ModuleNotFoundError: No module named ‘websocket‘

1 报错 ModuleNotFoundError: No module named websocket 2 解决方法 pip install websocket 1 报错 AttributeError: module websocket has no attribute enableTrace 2 分析 一般是由于websocket的依赖包没有安装造成的。websocket.enableTrace()方法是在websocket-cli…

C语言第十课----------------扫雷----------数组的经典练手题

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; &#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382;…

React构建的JS优化思路

背景 之前个人博客搭建时&#xff0c;发现页面加载要5s才能完成并显示 问题 React生成的JS有1.4M&#xff0c;对于个人博客服务器的带宽来说&#xff0c;压力较大&#xff0c;因此耗费了5S的时间 优化思路 解决React生成的JS大小&#xff0c;因为我用的是react-router-dom…

prometheus告警发送组件部署

一、前言 要实现Prometheus的告警发送需要通过alertmanager组件&#xff0c;当prometheus触发告警策略时&#xff0c;会将告警信息发送给alertmanager&#xff0c;然后alertmanager根据配置的策略发送到邮件或者钉钉中&#xff0c;发送到钉钉需要安装额外的prometheus-webhook…

模拟实现消息队列(以 RabbitMQ 为蓝本)

目录 1. 需求分析1.1 介绍一些核心概念核心概念1核心概念2 1.2 消息队列服务器&#xff08;Broker Server&#xff09;要提供的核心 API1.3 交换机类型1.3.1 类型介绍1.3.2 转发规则&#xff1a; 1.4 持久化1.5 关于网络通信1.5.1 客户端与服务器提供的对应方法1.5.2 客户端额外…

【LangChain概念】了解语言链️:第2部分

一、说明 在LangChain的帮助下创建LLM应用程序可以帮助我们轻松地链接所有内容。LangChain 是一个创新的框架&#xff0c;它正在彻底改变我们开发由语言模型驱动的应用程序的方式。通过结合先进的原则&#xff0c;LangChain正在重新定义通过传统API可以实现的极限。 在上一篇博…

一文读懂!一年耗能堪比2个三峡电站的大数据中心,背后竟隐藏着这些秘密......

全国大数据中心1年的能耗规模相当于2个三峡电站一整年的发电量&#xff0c;这是为什么&#xff1f; 大数据中心每耗费1度电&#xff0c;只有一半用在了“计算”上面&#xff0c;其他的都应用在散热、照明等方面到底是怎么回事&#xff1f; 为什么说在算力上每投入1元&#xff0…

【二】数据库系统

数据库系统的分层抽象DBMS 数据的三个层次从 数据 到 数据的结构----模式数据库系统的三级模式&#xff08;三级视图&#xff09;数据库系统的两层映像数据库系统的两个独立性数据库系统的标准结构 数据模型从 模式 到 模式的结构----数据模型三大经典数据模型 数据库的演变与发…