elementUI 表格中如何合并动态数据的单元格

2024-02-06 17:04

本文主要是介绍elementUI 表格中如何合并动态数据的单元格,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

elementUI 表格中如何合并动态数据的单元格

ui中提供的案例是固定写法无法满足 实际开发需求

下面进行改造如下 准备数据如下

//在表格中 设置单元格的方法  :span-method="spanMethodFun"
<el-table :data="tableData" border  :span-method="spanMethodFun">
//...
</el-table>//表格数据  这里的数据是动态获取的
let tableData = ref([{no:1,id:1},{no:1,id:1},{no:1,id:1},{no:1,id:2}])
//定义数组 用来临时存储 需要合并的列数 和行数
let spanArr:any = []
//下标 用来设置临时存储数据的
let pos:any = 0
//获取 需要合并数据的 方法
function getSpaArr(){
//循环表格数据for(let i=0;i<tableData.value.length;i++){if(i == 0){//如何是第一个数据  表示只有一个相同的数据索引设置为0spanArr.push(1)pos = 0}else{if(tableData.value[i].id == tableData.value[i - 1].id){ //这里用id判断的 也可以用相同的名字 或者其他都可以判断值// 如果数据相同 第一列加1  其他 设置为0spanArr[pos] += 1spanArr.push(0)}else{// 不相同 重新开始判断spanArr.push(1)pos = i}}}
}
//调用方法 获取临时合并数据
getSpaArr()
//查看临时合并的数据
console.log(spanArr,'spanArr');// 得到数据如下:[3, 0, 0, 1] 'spanArr'//这里调用合并单元格事件 row当前行的值,column当前列的值,rowIndex行的下标,columnIndex列的下标
const spanMethodFun = ({ row, column, rowIndex, columnIndex, }: any) => {// console.log(row,column,rowIndex,columnIndex);//如何临时合并数据存在执行if(spanArr.length > 0){//这里设置第几行需要合并数据if (columnIndex == 1 || columnIndex == 6) {//第几列数据return { rowspan: spanArr[rowIndex], //需要合并的行数 通过行下表 获取临时存储值colspan: spanArr[rowIndex]>0?1:0, //需要合并的列数 0代表不合并 1 合并成一列}}}
}

效果如下 第2行 和最后一行进行了合并 其他没有合并
在这里插入图片描述

这篇关于elementUI 表格中如何合并动态数据的单元格的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/684977

相关文章

如何利用Python实现给Excel表格截图

《如何利用Python实现给Excel表格截图》这篇文章主要为大家详细介绍了如何利用Python实现给Excel表格截图功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 我搜索了网络上的方案,感觉把 Excel 表格转换为 html 再用 platwright 截图是比China编程较顺

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

使用Python合并 Excel单元格指定行列或单元格范围

《使用Python合并Excel单元格指定行列或单元格范围》合并Excel单元格是Excel数据处理和表格设计中的一项常用操作,本文将介绍如何通过Python合并Excel中的指定行列或单... 目录python Excel库安装Python合并Excel 中的指定行Python合并Excel 中的指定列P

使用SQL语言查询多个Excel表格的操作方法

《使用SQL语言查询多个Excel表格的操作方法》本文介绍了如何使用SQL语言查询多个Excel表格,通过将所有Excel表格放入一个.xlsx文件中,并使用pandas和pandasql库进行读取和... 目录如何用SQL语言查询多个Excel表格如何使用sql查询excel内容1. 简介2. 实现思路3

基于C#实现PDF文件合并工具

《基于C#实现PDF文件合并工具》这篇文章主要为大家详细介绍了如何基于C#实现一个简单的PDF文件合并工具,文中的示例代码简洁易懂,有需要的小伙伴可以跟随小编一起学习一下... 界面主要用于发票PDF文件的合并。经常出差要报销的很有用。代码using System;using System.Col

Python视频剪辑合并操作的实现示例

《Python视频剪辑合并操作的实现示例》很多人在创作视频时都需要进行剪辑,本文主要介绍了Python视频剪辑合并操作的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习... 目录介绍安装FFmpegWindowsMACOS安装MoviePy剪切视频合并视频转换视频结论介绍

不删数据还能合并磁盘? 让电脑C盘D盘合并并保留数据的技巧

《不删数据还能合并磁盘?让电脑C盘D盘合并并保留数据的技巧》在Windows操作系统中,合并C盘和D盘是一个相对复杂的任务,尤其是当你不希望删除其中的数据时,幸运的是,有几种方法可以实现这一目标且在... 在电脑生产时,制造商常为C盘分配较小的磁盘空间,以确保软件在运行过程中不会出现磁盘空间不足的问题。但在

在C#中合并和解析相对路径方式

《在C#中合并和解析相对路径方式》Path类提供了几个用于操作文件路径的静态方法,其中包括Combine方法和GetFullPath方法,Combine方法将两个路径合并在一起,但不会解析包含相对元素... 目录C#合并和解析相对路径System.IO.Path类幸运的是总结C#合并和解析相对路径对于 C

hdu2241(二分+合并数组)

题意:判断是否存在a+b+c = x,a,b,c分别属于集合A,B,C 如果用暴力会超时,所以这里用到了数组合并,将b,c数组合并成d,d数组存的是b,c数组元素的和,然后对d数组进行二分就可以了 代码如下(附注释): #include<iostream>#include<algorithm>#include<cstring>#include<stack>#include<que

day-51 合并零之间的节点

思路 直接遍历链表即可,遇到val=0跳过,val非零则加在一起,最后返回即可 解题过程 返回链表可以有头结点,方便插入,返回head.next Code /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}*