antd 中 Table表格 合并行

2023-11-16

1.首先获取所要合并行的column,去除每一行数据的rowkey,本例取的是Name这一列。
2.当Name的值在多个页面出现时需重新记录rowSpan。
3.合并column中具有相同Name的行。

结果图如下:
在这里插入图片描述
在这里插入图片描述

表格数据:

 const DataArr= [{
    Name: '小明',
    age: '',
    oid: '1',
  },
 ...15个一样de // oid不一样
 {
    Name: '小明小明',
    age: '',
    oid: '17',
  }]

  • 处理 columns 中的某列需要合并行的render
    合并行的代码:
 const columns = [
    {
      title: '名称',
      key: 'Name',
      render(_, row, Tindex) {
        let rowSpan = 1;
        let arrIndex = 0;
        DataArr.forEach((item, Dindex) => {
          if (item.oid === row.oid) {
            arrIndex = Dindex;// 先获取Name所在的arr的Dindex
          }
        });
        if (Tindex === 0) { // 当值在多个页面出现时重新记录rowSpan
          DataArr.forEach((item, Dindex) => {
            if (Dindex > arrIndex) {
              if (item.Name=== row.Name) {
                rowSpan += 1;
              }
            }
          });
        } else if (DataArr[arrIndex].Name=== DataArr[arrIndex - 1].Name) {
            rowSpan = 0;
          } else {
            DataArr.forEach((item, Dindex) => {
              if (Dindex > arrIndex) {
                if (item.Name=== row.Name) {
                  rowSpan += 1;
                }
              }
            });
          }
        }
        return {
          children: row.Name,
          props: {
            rowSpan,
          },
        };
      },
    },
    {
      title: '年龄',
      key: 'age',
    }]

转载自: https://blog.csdn.net/qq_33472885/article/details/99679327

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

antd 中 Table表格 合并行 的相关文章

随机推荐

  • 软件系统架构有哪几种?

    互联网飞速发展的当下 有一种极其重要的门类也随之应运而生 那就是软件工程 而软件工程中 又有非常重要的一环 那就是软件架构 这也是各个互联网公司无论大小都必备的一个系统基础 那么什么是软件架构呢 事实上 架构在软件发明时的 N 多年以前 就
  • Java导入xml文件

    需求 前后端分离项目 后端Springboot框架 将学生信息通过xml文件格式导入 一个学生信息 以及该学生选择的学科 student xml文件格式如下 StudentController java PostMapping import
  • 逆向爬虫27 sojson反调加密

    逆向爬虫27 sojson反调加密 目标 掌握sojson的加密的特点和原理 使用静态文件替换sojson反调 一 sojson加密特点和原理 sojson是一种常用的js反调和加密手段 在学习如何处理它之前 我们需要先了解它的特点和原理
  • LightGBM参数介绍

    Xgboost和LightGBM部分参数对照 Xgboots LightGbm booster default gbtree boosting default gbdt eta default 0 3 learning rate defau
  • python 提示 keyError 的4种解决方法

    https blog csdn net u011089523 article details 72887163 在读取dict的key和value时 如果key不存在 就会触发KeyError错误 如 Python t a 1 b 2 c
  • SSD-Pytorch训练自己的VOC数据集&遇到的问题及解决办法

    SSD 训练 data init py data config py data voc0712 py layers modules multibox loss py ssd py train py 预训练文件vgg16 reducedfc
  • ‘settings.xml‘ has syntax errors 解决办法

    settings xml has syntax errors 解决办法 文章目录 settings xml has syntax errors 解决办法 参考链接 又是一个小知识点 pom xml中的
  • 基于pwntools编写pwn代码

    目录 预备知识 pwn pwntools 实验目的 实验环境 实验步骤一 1 Pwntools安装及模块 已装 2 常用模块详细介绍 实验步骤二 实验步骤三 预备知识 pwn Pwn 是一个黑客语法的俚语词 是指攻破设备或者系统 发音类似
  • 快速选择算法

    quick select 算法 LintCode 5 第k大元素 题目 在数组中找到第k大的元素 样例 给出数组 9 3 2 4 8 第三大的元素是 4 给出数组 1 2 3 4 5 第一大的元素是 5 第二大的元素是 4 第三大的元素是
  • Lingo软件的基本语法

    目录 基本语法 集合 数据 数据计算段 变量的初始化 模型的目标函数和约束条件 实时数据处理 注意 基本语法 集合 sets 集合名称1 成员列表1 属性1 1 属性1 2 属性1 n1 集合名称2 成员列表2 属性2 1 属性2 2 属性
  • 系统时间显示踩坑记录

    问题 签到前时间每秒变化显示 原始做法是 截取获取的系统时间的后九位 但是红米手机的系统时间最后两位不是秒 而是上下午的英文字母 导致小时截取不到 如图中间位置 希望实现如图左 方法 分别获取系统的时分秒 处理下不是两位的数字 然后拼接起来
  • 如何将文件重置或恢复到特定版本?

    问题描述 如何在特定的提交哈希 我通过 git log 和 git diff 确定 处将修改后的文件恢复到其先前的版本 解决方案1 一个优秀的自由职业者 应该有对需求敏感和精准需求捕获的能力 而huntsbot com提供了这个机会 假设您
  • LibCurl教程2

    http blog csdn net ljob2006 article details 4390612 2 1 LibCurl编程流程 在基于LibCurl的程序里 主要采用callback function 回调函数 的形式完成传输任务
  • 0401hive入门-hadoop-大数据学习.md

    文章目录 1 Hive概述 2 Hive部署 2 1 规划 2 2 安装软件 3 Hive体验 4 Hive客户端 4 1 HiveServer2 服务 4 2 DataGrip 5 问题集 5 1 Could not open clien
  • js踩坑 foreach中return不能跳出循环,for中才可以

    js踩坑 foreach中return不能跳出循环 for中才可以 如代码所示 const list 1 2 3 4 5 list forEach e gt if e 3 return console log e 结束 运行结果 通过上面的
  • iOS 关于UIWebView常见使用方法

    Step UIWebView 1 UIWebView常用方法 1 声明 property nonatomic strong UIWebView webView 1 代理 UIWebViewDelegate 2 ATS配置 info plis
  • html 字体形状,二十款漂亮的CSS字体样式

    样式一 body margin 0 padding 0 line height 1 5em font family Times New Roman Times serif font size 14px color 000000 backgr
  • Android Camera、Camera2详解

    前言 Android5 0之前使用android hardware包下的Camera类进行拍照 录视频等功能 5 0以后 新增了android hardware camera2包 利用新的机制 新的类进行拍照 录视频 使用Camera 一
  • 【Java基础知识 6】Java异常详解

    目录 一 Java异常简介 1 Exception和Error 2 NoClassDefFoundError 和 ClassNotFoundException 有什么区别
  • antd 中 Table表格 合并行

    1 首先获取所要合并行的column 去除每一行数据的rowkey 本例取的是Name这一列 2 当Name的值在多个页面出现时需重新记录rowSpan 3 合并column中具有相同Name的行 结果图如下 表格数据 const Data