element table表格行列合并span-method,根据数据动态行列合并

news2024/10/6 0:29:05

表格行列合并需要用到 table的方法 span-method

在这里插入图片描述

根据数据来进行动态的行列合并,实例如下:

 <el-table
      :data="tableData"
      :span-method="objectSpanMethod" 
      style="width: 100%">
      <el-table-column
        prop="key"
        label="分类"
        width="180">
      </el-table-column>
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
    </el-table>
let data = [
	{ key:'test1', id:0, name:'xxx' },
	{ key:'test1', id:1, name:'xxx' },
	{ key:'test2', id:2, name:'xxx' },
	{ key:'test1', id:3, name:'xxx' },
	{ key:'test2', id:4, name:'xxx' },
	{ key:'test1', id:5, name:'xxx' },
]

我们要根据 key 进行列合并,将test1合并到一起,test2合并到一起

//先处理数据
let one = data.filter(item => item.key === 'test1')
let two= data.filter(item => item.key === 'test2')

//保证test1 在一堆,test2在一堆
tableData = one.concat(two)

//列合并方法
objectSpanMethod =({ row, column, rowIndex, columnIndex })=>{
	const { key } = row
        // test1 使用 rowIndex作为开始
        // test2 采用rowIndex - test1 长度开始
        let last = rowIndex - one.length
        if (columnIndex === 0) { //判断是否是第一列
          if(key === 'test1'){ //判断合并项 R1 R2
             if (rowIndex % one.length === 0) {
              return {
                rowspan: one.length, // 需要合并的行数
                colspan: 1
              }
            }else{ //不在范围内 直接返回默认
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          }else if(key === 'test2'){
            if(last % two.length === 0){
              return {
                rowspan: two.length, // 需要合并的行数
                colspan: 1
              }
           }else{
            return {
              rowspan: 0,
              colspan: 0
            }
           }
          }  
        }
}

我们根据 key 进行列合并,按照合并规则 id 为0 1 3 5的数据合并到 test1 中,id为2 4的数据合并到test2中

在这里插入图片描述

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

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

相关文章

【python】OpenCV—Color Detection

学习来自 如何使用 OpenCV Python 检测颜色 import cv2 import numpy as npdef red_hsv(img, saveFalse):lower_hsv1 np.array([0, 175, 20])higher_hsv1 np.array([10, 255, 255])lower_hsv2 np.array([170, 175, 20])higer_hsv2 np.array([10, 255, 255])mask1 cv2.inR…

基于STM32的轻量级Web服务器设计

文章目录 一、前言1.1 开发背景1.2 实现的功能1.3 硬件模块组成1.4 ENC28J60网卡介绍1.5 UIP协议栈【1】目标与特点【2】核心组件【3】应用与优势 1.6 添加UIP协议栈实现创建WEB服务器步骤1.7 ENC28J60添加UIP协议栈实现创建WEB客户端1.8 ENC28J60移植UIP协议并编写服务器测试示…

[代码复现]Self-Attentive Sequential Recommendation(ing)

参考代码&#xff1a;SASRec.pytorch 可参考资料&#xff1a;SASRec代码解析 前言&#xff1a;文中有疑问的地方用?表示了。可以通过ctrlF搜索’?。 环境 conda create -n SASRec python3.9 pip install torch torchvision因为我是mac运行的&#xff0c;所以device是mps 下面…

npm install pubsub-js报错的解决汇总

我在练习谷粒商城P83时&#xff0c;选择分类时触发向后端请求选择分类catId绑定的品牌数据&#xff0c;发现前端控制台报错&#xff1a; "PubSub is not definded",找不到pubsub。 因为缺少pubsub包&#xff0c;所以开始安装此包。 于是在网上一顿搜索猛如虎&…

C# :IQueryable IEnumerable

1. IEnumerable namespace System.Collections: public interface IEnumerable {public IEnumerator GetEnumerator (); }public interface IEnumerator {pubilc object Current { get; }public bool MoveNext ();public void Reset (); }IEnumerable 只有一个方法 GetEnumera…

django使用fetch上传文件

在上一篇文章中&#xff0c;我包装了fetch方法&#xff0c;使其携带cookie。但是之前fetch传递的是json数据&#xff0c;现在有了一个上传文件的需求&#xff0c;因此需要进行修改&#xff1a; const sendRequest (url, method, data) > {const csrftoken Cookies.get(cs…

C++ | Leetcode C++题解之第119题杨辉三角II

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> getRow(int rowIndex) {vector<int> row(rowIndex 1);row[0] 1;for (int i 1; i < rowIndex; i) {row[i] 1LL * row[i - 1] * (rowIndex - i 1) / i;}return row;} };

HTML动态响应2-Servlet+Ajax实现HTTP前后台交互方式

作者:私语茶馆 前言 其他涉及到的参考章节: HTML动态响应1—Ajax动态处理服务端响应-CSDN博客 Web应用JSON解析—FastJson1.2.83/Tomcat/IDEA解析案例-CSDN博客 HTML拆分与共享方式——多HTML组合技术-CSDN博客 1.场景: WEb项目经常需要前后端交互数据,并动态修改HTML页…

洛谷 P1194 买礼物

题目来源于&#xff1a;洛谷 题目本质&#xff1a;图论生成树 代码如下&#xff1a; #include<bits/stdc.h> using namespace std; const int N10005; const int M250005; int n,m; int cnt,flag,px,py; int ans0; //ans表示最小花费的钱数 int f[N]; struct Edge{in…

list~模拟实现

目录 list的介绍及使用 list的底层结构 节点类的实现 list的实现 构造函数 拷贝构造 方法一&#xff1a;方法二&#xff1a; 析构函数 赋值重载 insert / erase push_/pop_(尾插/尾删/头插/头删) begin和end&#xff08;在已建立迭代器的基础上&#xff09; 迭代…

Windows【工具 06】mklink创建符号链接和硬链接(实现文件夹不同磁盘存储)

mklink创建符号链接和硬链接 1.创建符号链接1.1 目录符号链接1.2 文件符号链接 2.创建硬链接3.区别3.1 符号链接&#xff08;Symbolic Link&#xff09;3.2 硬链接&#xff08;Hard Link&#xff09; mklink是Windows中用于创建符号链接&#xff08;symbolic links&#xff09;…

数据库管理哪家强?Devart VS Navicat 360°全方位对比解析

今天我们向大家推荐的是两个开发环节的主流数据库管理品牌&#xff0c;那么你知道这两款数据库管理软件品牌与 数据库引擎配套的管理软件有什么区别吗&#xff1f;小编这就360全方位为您解答&#xff1a; ★ 品牌介绍 Devart&#xff1a;拥有超过20年的经验&#xff0c;利用最…

docker目录挂载失败:Check if the specified host path exists and is the expected type

docker目录挂载失败&#xff1a;Check if the specified host path exists and is the expected type docker目录挂载命令&#xff0c;其目的是为了达到修改linux上的文件同步到容器上&#xff0c;从而实现修改容器的配置文件。 在docker目录挂载或启动容器时报错&#xff0c…

若依前后端分离Spring Security新增手机号登录

备忘贴 转自&#xff1a;【若依RuoYi短信验证码登录】汇总_数据库_z_xiao_qiang-RuoYi 若依 配置Security: 按照Security的流程图可知&#xff0c;实现多种方式登录&#xff0c;只需要重写三个主要的组件&#xff0c;第一个用户认证处理过滤器&#xff0c;第二个用户认证tok…

【Git 版本管理】合并 + 变更,看懂Git

看懂 Git 合并操作分离 HEAD分离 HEAD 测试 相对引用(^ || ~)操作符 ^相对引用 ^ 测试操作符 ~相对引用 ~ 测试 撤销变更Git ResetGit Revert撤销变更 测试 整理提交记录Git Cherry-pick测试 交互式 rebase交互式 rebase 测试 合并操作 关键字&#xff1a;commit、branch、merg…

自媒体必用的50 个最佳 ChatGPT 社交媒体帖子提示prompt通用模板教程

在这个信息爆炸的时代&#xff0c;社交媒体已经成为我们生活中不可或缺的一部分。无论是品牌宣传、个人展示&#xff0c;还是日常交流&#xff0c;我们都离不开它。然而&#xff0c;要在众多信息中脱颖而出&#xff0c;吸引大家的关注并不容易。这时候&#xff0c;ChatGPT这样的…

DBeaver添加DM8驱动(maven下载和jar包下载配置)

DBeaver 24.0.3添加DM8驱动 下载DBeaver下载DM达梦驱动下载 安装配置使用自带Dameng自行添加达梦驱动 因为最近公司项目有信创要求&#xff0c;所以下载了达梦数据库。使用自带的达梦管理工具不是很方便&#xff0c;于是换了DBeaver。 哼哧哼哧安装好后&#xff0c;创建数据库连…

win11+vmware16.0+Ubuntu22.04+开机蓝屏

总结 本机系统 vm虚拟机下载 参考链接 1. 小白必看的Ubuntu20.04安装教程&#xff08;图文讲解&#xff09; 2. 软件目录【火星】——VM下载 3. Win11使用VMware15/16启动虚拟机直接蓝屏的爬坑记录 VMware16.0

MySQL(十二) Connector/C

首先可以在mysql的官网下载对应的库文件&#xff0c;这里就不演示了 1. 测试 通过 mysql_get_client_info() 函数&#xff0c;来验证我们的引入是否成功 #include <iostream> #include <mysql/mysql.h>int main() {std::cout << "mysql version:&quo…

帕友的锻炼小建议,助您重拾健康与活力

帕金森病&#xff0c;作为一种常见的神经系统退行性疾病&#xff0c;给患者的生活带来了诸多困扰。然而&#xff0c;通过科学的锻炼方法&#xff0c;我们可以有效缓解病情&#xff0c;提高生活质量。 一、有氧运动&#xff1a;提升心肺功能 对于帕金森病患者来说&#xff0c;适…