element + table 每两行对比相同值列合并

news2024/10/5 20:26:20

在这里插入图片描述
在开始之前先要明确几个概念:
保持不变:{ rowspan: 1, colspan: 1 }
删除一个单元格:{ rowspan: 0, colspan: 0 }
合并一个单元格:{ rowspan: 2, colspan: 1 }

<template>
  <div>
    <el-table
        :data="tableData"
        :span-method="mergeSpanMethod"
        border
        :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
    >
      <el-table-column prop="School" label="学校" align="center" />
      <el-table-column prop="Chinese" label="语文" align="center" />
      <el-table-column prop="Math" label="数学" align="center" />
      <el-table-column prop="English" label="英语" align="center" />
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      tableData: [
        {
          School: "第1小学",
          Chinese: "180",
          Math: 0,
          English: "180"
        },
        {
          School: "第1小学",
          Chinese: 0,
          Math: 0,
          English: "180"
        },
        {
          School: "第2小学",
          Chinese: "290",
          Math: "200",
          English: "180"
        },
        {
          School: "第2小学",
          Chinese: "295",
          Math: "200",
          English: "280"
        },
        {
          School: "第3小学",
          Chinese: "398",
          Math: "385",
          English: "380"
        },
        {
          School: "第3小学",
          Grade: "2年级",
          Chinese: "398",
          Math: "100",
          English: "80"
        },
        {
          School: "第4小学",
          Grade: "3年级",
          Chinese: "91",
          Math: 0,
          English: "80"
        },
        {
          School: "第4小学",
          Grade: "3年级",
          Chinese: "91",
          Math: 0,
          English: "87"
        },
        {
          School: "第5小学",
          Grade: "3年级",
          Chinese: "79",
          Math: 0,
          English: "80"
        }
      ],
    };
  },
  props: {
    msg: String
  },
  mounted() {
  },
  methods: {
    mergeSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 如果某些列不需要合并, 在此排除
      if (columnIndex === 1) return {rowspan: 1, colspan: 1};
      // 两两对比 相同的列合并
      const num = 2;
      const times = Math.ceil(this.tableData.length / num);
      for (let k = 0 ; k < times; k++) {
        const one = k * num;
        const two = k * num + 1;
        if (rowIndex === one || rowIndex === two) {
          const currentValue = row[column.property];
          const arr = [this.tableData[one], this.tableData[two]];
          // 获取上一行相同列的值
          const preRow = arr[rowIndex - 1 - (k * num)];
          const preValue = preRow ? preRow[column.property] : null;

          // 如果当前值和上一行的值相同,则将当前单元格隐藏
          if (currentValue === preValue) {
            return { rowspan: 0, colspan: 0 };
          } else {
            let rowspan = 1;
            for (let i = (rowIndex - (k * num)) + 1; i < arr.length; i++) {
              const nextRow = arr[i];
              const nextValue = nextRow ? nextRow[column.property] : null;
              if (nextValue === currentValue) {
                rowspan++;
              } else {
                break;
              }
            }
            return { rowspan, colspan: 1 };
          }
        }
      }
      return {rowspan: 1, colspan: 1};
	  // 这下面是在解题时的思路,也是一步步的慢慢推导出来的
	  // 先写死数据一组组的对比,再从中找共性,如果上面看不懂,可以把上面注释,解开下面 就明白了
      // if (rowIndex === 0 || rowIndex === 1) {
      //   const currentValue = row[column.property];
      //   const arr = [this.tableData[0], this.tableData[1]];
      //   // 获取上一行相同列的值
      //   const preRow = arr[rowIndex - 1];
      //   const preValue = preRow ? preRow[column.property] : null;
      //
      //   // 如果当前值和上一行的值相同,则将当前单元格隐藏
      //   if (currentValue === preValue) {
      //     return { rowspan: 0, colspan: 0 };
      //   } else {
      //     let rowspan = 1;
      //     for (let i = rowIndex + 1; i < arr.length; i++) {
      //       const nextRow = arr[i];
      //       const nextValue = nextRow[column.property];
      //       if (nextValue === currentValue) {
      //         rowspan++;
      //       } else {
      //         break;
      //       }
      //     }
      //     return { rowspan, colspan: 1 };
      //   }
      // }
      // if (rowIndex === 2 || rowIndex === 3) {
      //   const currentValue = row[column.property];
      //   const arr = [this.tableData[2], this.tableData[3]];
      //
      //   const preRow = arr[rowIndex - 1 - 2];
      //   const preValue = preRow ? preRow[column.property] : null;
      //
      //   // 如果当前值和上一行的值相同,则将当前单元格隐藏
      //   if (currentValue === preValue) {
      //     return { rowspan: 0, colspan: 0 };
      //   } else {
      //     let rowspan = 1;
      //     for (let i = (rowIndex - 2) + 1; i < arr.length; i++) {
      //       const nextRow = arr[i];
      //       const nextValue = nextRow[column.property];
      //       if (nextValue === currentValue) {
      //         rowspan++;
      //       }
      //     }
      //     return { rowspan, colspan: 1 };
      //   }
      // }
      // if (rowIndex === 4 || rowIndex === 5) {
      //   const currentValue = row[column.property];
      //   const arr = [this.tableData[4], this.tableData[5]];
      //
      //   const preRow = arr[rowIndex - 1 - 4];
      //   const preValue = preRow ? preRow[column.property] : null;
      //
      //   // 如果当前值和上一行的值相同,则将当前单元格隐藏
      //   if (currentValue === preValue) {
      //     return { rowspan: 0, colspan: 0 };
      //   } else {
      //     let rowspan = 1;
      //     for (let i = (rowIndex - 4) + 1; i < arr.length; i++) {
      //       const nextRow = arr[i];
      //       const nextValue = nextRow[column.property];
      //       if (nextValue === currentValue) {
      //         rowspan++;
      //       }
      //     }
      //     return { rowspan, colspan: 1 };
      //   }
      // }
      // console.log('rowIndex', rowIndex);
      // return {rowspan: 1, colspan: 1}
    }
  }
}
</script>

如果需要所有的列都对比合并单元格可以看下面的文章
element + table 行列合并

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

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

相关文章

二叉树的遍历 Java

二叉树的遍历 递归法前序遍历中序遍历后序遍历改进 迭代法前序、后序遍历中序遍历 Java 中 null、NULL、nullptr 区别 public class TreeNode {int val;TreeNode left;TreeNode right;TreeNode() {}TreeNode(int val) { this.val val; }TreeNode(int val, TreeNode left, Tree…

LLM推理部署(七):FireAttention——通过无损量化比vLLM快4倍

Mixtral作为第一个在数万亿tokens上训练的OSS模型&#xff0c;最近在人工智能社区掀起了波澜&#xff0c;它支持“混合专家”&#xff08;MoE&#xff09;&#xff0c;并且训练和推理速度非常快。 Fireworks AI是第一个托管Mixtral的平台&#xff0c;在Mixtral公开发布之前就托…

小程序中使用微信同声传译插件实现语音识别、语音合成、文本翻译功能----语音识别(一)

官方文档链接&#xff1a;https://mp.weixin.qq.com/wxopen/plugindevdoc?appidwx069ba97219f66d99&token370941954&langzh_CN#- 要使用插件需要先在小程序管理后台的设置->第三方设置->插件管理中添加插件&#xff0c;目前该插件仅认证后的小程序。 语音识别…

༺༽༾ཊ—游戏-01_2D-开发—ཏ༿༼༻

首先利用安装好的Unity Hub创建一个unity 2D&#xff08;URP渲染管线&#xff09;项目 选择个人喜欢的操作格局&#xff08;这里采用2 by 3&#xff09; 在Project项目管理中将双栏改为单栏模式&#xff08;个人喜好&#xff09; 找到首选项&#xff08;Preferences&#xff09…

2024 解决matplotlib中文字体问题

第一种代码&#xff08;失败代码&#xff09; import matplotlib as mpl import matplotlib.pyplot as plt from matplotlib.font_manager import FontPropertiesfont_path /Users/huangbaixi/Desktop/SimHei.ttfdef plot_demo():#print(mpl.get_cachedir())# 绘制折线图font…

【记忆化搜索】

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;【LeetCode】winter vacation training 前言 记忆化搜索是一种优化搜索算法的方法&#xff0c;它可…

Apache StringUtils:Java字符串处理工具类

简介 在我们的代码中经常需要对字符串判空&#xff0c;截取字符串、转换大小写、分隔字符串、比较字符串、去掉多余空格、拼接字符串、使用正则表达式等等。如果只用 String 类提供的那些方法&#xff0c;我们需要手写大量的额外代码&#xff0c;不然容易出现各种异常。现在有…

GL Logger和CANFDLog-OTL-128两款记录仪都是如何实现高效的报文录制的?

GL Logger是Vector推出的记录CAN/CAN FD、LIN、FlexRay和MOST数据通信的工具。以GL2400为例带着大家一步步地实现路试过程中通过整车OBD口进行CAN/CANFD报文的录制。 Step1 设备配置 设备配置即设备录制方式、录制内容、设备休眠唤醒策略等。 ▷ 打开Vector Logger Configurat…

调试ad5245的总结

调试ad5245的总结 这个ad5245是通过IIC与FPGA进行通信的&#xff0c;首先要理解IIC协议。 经验总结&#xff1a; 1、SCL和SDA端的要有上拉电阻&#xff0c;且上拉电阻能正常工作&#xff1b; 2、要往SDA数据线上写三个字节才能调节ad5245的电阻值&#xff0c;第三个字节就是…

html中的flex是什么?——弹性布局

在HTML中&#xff0c;flex是一种布局方式&#xff0c;用于处理容器中的子元素的布局。它是CSS3的一部分&#xff0c;也被称为弹性布局。 通过使用flex布局&#xff0c;可以将容器中的子元素进行灵活的定位和扩展&#xff0c;以适应不同的屏幕尺寸和设备。它提供了一种简单而强…

flink 1.18 sql gateway /sql gateway jdbc

一 sql gateway 注意 之所以直接启动gateway 能知道yarn session 主要还是隐藏的配置文件&#xff0c;但是配置文件可以被覆盖&#xff0c;多个session 保留最新的applicationid 1 安装flink &#xff08;略&#xff09; 2 启动sql-gatway(sql-gateway 通过官网介绍只能运行…

【时光记:2023的心灵旅程】

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

tree数据处理

接口获取数据oldArr [{"deptCode": "01","parentCode": "000","sortKey": 4,"deptName": "办公室&#xff08;党委办公室、董事会办公室&#xff09;","children": [{"deptCode":…

九、Qt C++ 毕业设计 数据库相关

《一、QT的前世今生》 《二、QT下载、安装及问题解决(windows系统)》《三、Qt Creator使用》 ​​​ 《四、Qt 的第一个demo-CSDN博客》 《五、带登录窗体的demo》 《六、新建窗体时&#xff0c;几种窗体的区别》 《七、Qt 信号和槽》 《八、Qt C 毕业设计-CSDN博客》 …

从JVM角度对java中引用的理解

学java这么久了&#xff0c;对java引用越来越深刻&#xff0c;好好梳理一下下面三个问题&#xff0c;带着问题进行理解。 什么是引用&#xff1f;引用存放在jvm哪个区域&#xff1f; 引用是一种变量类型。引用类型占四个字节。 变量类型分为基本类型和引用类型。 我们知道jav…

2023年跨国企业如何实现跨境数据传输合规化(上)

一、什么是数据跨境传输&#xff1f; 首先了解一个概念&#xff0c;什么是数据跨境传输&#xff1f; 数据跨境传输简单概括就是指信息通过互联网等网络媒介&#xff0c;在跨国企业之间进行传递和交换的过程。 有一则官方网站关于全球化数字化的数据统计&#xff1a;仅2019 年…

【Web】什么是 XSS 攻击,如何避免?

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Web ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 常见方法&#xff1a; 结语 我的其他博客 前言 在当今数字化时代&#xff0c;网络安全成为信息技术领域中的一项至关重要的任务。X…

视频和音频怎么合并在一起?分享3个轻松合并的实用技巧

视频和音频怎么合并在一起&#xff1f;在数字媒体时代&#xff0c;视频和音频是制作多媒体内容不可或缺的元素。有时我们需要将视频和音频合并在一起&#xff0c;以创建更丰富、更有趣的多媒体内容。那么&#xff0c;如何将视频和音频合并在一起呢&#xff1f;下面将介绍一些实…

NLP论文阅读记录 - 2022 | WOS 用于摘要法律文本的有效深度学习方法

文章目录 前言0、论文摘要一、Introduction1.1目标问题 二.相关工作三.本文方法四 实验效果4.1数据集4.2 对比模型4.3实施细节4.4评估指标4.5 实验结果4.6 细粒度分析 五 总结 前言 Effective deep learning approaches for summarization of legal texts&#xff08;22&#x…

第一个Python程序_获取网页 HTML 信息[Python爬虫学习笔记]

使用 Python 内置的 urllib 库获取网页的 html 信息。注意&#xff0c;urllib 库属于 Python 的标准库模块&#xff0c;无须单独安装&#xff0c;它是 Python 爬虫的常用模块。 获取网页 HTML 信息 1) 获取响应对象 向百度&#xff08;http://www.baidu.com/&#xff09;发起…