el-table实现指定列合并

news2024/11/23 14:52:22

table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspancolspan的对象

代码

<template>
  <div id="app">
     <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
    >
      <el-table-column prop="School" label="学校" align="center">
      </el-table-column>
      <el-table-column prop="Grade" label="年级" align="center" />
      <el-table-column prop="Class" label="班级" align="center" />
      <el-table-column prop="Name" 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 {
    data() {
      return {
            colFields: [
        "School",
        "Grade",
        "Class",
        "Name",
        "Chinese",
        "Math",
        "English",
      ],
      spanArr: [], //存储合并单元格的开始位置
      // 表格数据
      tableData: [
        // 一年级
        {
          School: "新华小学",
          Grade: "1年级",
          Class: "1班",
          Name: "张三",
          Chinese: "90",
          Math: "100",
          English: "80",
        },
        {
          School: "新华小学",
          Grade: "1年级",
          Class: "2班",
          Name: "李四",
          Chinese: "90",
          Math: "85",
          English: "81",
        },
        {
          School: "新华小学",
          Grade: "1年级",
          Class: "3班",
          Name: "王五",
          Chinese: "79",
          Math: "100",
          English: "86 ",
        },
        // 二年级
        {
          School: "新华小学",
          Grade: "2年级",
          Class: "1班",
          Name: "赵六",
          Chinese: "95",
          Math: "120",
          English: "82",
        },
        {
          School: "新华小学",
          Grade: "2年级",
          Class: "2班",
          Name: "钱八",
          Chinese: "98",
          Math: "85",
          English: "83",
        },
        {
          School: "新华小学",
          Grade: "2年级",
          Class: "3班",
          Name: "陈九",
          Chinese: "79",
          Math: "100",
          English: "84",
        },
        // 三年级
        {
          School: "新华小学",
          Grade: "3年级",
          Class: "1班",
          Name: "黄十",
          Chinese: "91",
          Math: "88",
          English: "85",
        },
        {
          School: "新华小学",
          Grade: "3年级",
          Class: "2班",
          Name: "魏一",
          Chinese: "90",
          Math: "86",
          English: "87",
        },
        {
          School: "新华小学",
          Grade: "3年级",
          Class: "3班",
          Name: "杨二",
          Chinese: "79",
          Math: "99",
          English: "85",
        },
      ],

    
      };

    },
   mounted() {
    this.getSpanArr();
  },
    methods: {
    /**
     * 分析每一列,找出相同的
     * @param data
     */
    getSpanArr() {
      for (let i = 0; i < this.tableData.length; i++) {
        let row = i;
        // let col = i % this.colCount;
        if (row === 0) {
          // i 表示行 j表示列
          for (let j = 0; j < this.colFields.length; j++) {
            this.spanArr[i * this.colFields.length + j] = {
              rowspan: 1,
              colspan: 1,
            };
          }
        } else {
          for (let j = 0; j < this.colFields.length; j++) {
            // 当前和上一次的一样
            //  合并所有列的相同数据单元格
            if (
              this.colFields[j] == "School" ||
              this.colFields[j] == "Grade"
            ) { // 指定合并哪些列
              if (
                this.tableData[row][this.colFields[j]] ===
                this.tableData[row - 1][this.colFields[j]]
              ) {
                let beforeItem =
                  this.spanArr[(row - 1) * this.colFields.length + j];
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1 + beforeItem.rowspan,
                  colspan: 1,
                };
                beforeItem.rowspan = 0;
                beforeItem.colspan = 0;
              } else {
                // rowspan 和 colspan 都为1表格此单元格不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              }
            }
          }
        }
      }
      // 对数据进行倒序
      let stack = [];
      for (let i = 0; i < this.colFields.length; i++) {
        for (let j = 0; j < this.tableData.length; j++) {
          // console.log("i=" + i + " j=" + j);
          // i 表示列 j表示行
          if (j === 0) {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            }
          } else {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            } else {
              stack.push(this.spanArr[j * this.colFields.length + i]);
              while (stack.length > 0) {
                let pop = stack.pop();
                let len = stack.length;
                this.spanArr[(j - len) * this.colFields.length + i] = pop;
              }
            }
          }
        }
      }
      // console.log(this.spanArr);
    
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(this.spanArr[rowIndex * this.colFields.length + columnIndex]);
      return this.spanArr[rowIndex * this.colFields.length + columnIndex];
    }
    }
  };
</script>
<style lang="less">

</style>

 这样就可以实现学校和年级这两列相同数据的合并了

效果

 

 

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

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

相关文章

ESP 32 蓝牙虚拟键盘链接笔记本电脑的键值问题

由于打算利用esp32 通过蓝牙链接电脑后实现一些特俗的键盘功能&#xff0c;所以就折腾了一下&#xff0c;折腾最耗费时间的却是键值问题&#xff0c;让一个20多年的老司机重新补充了知识 过程曲折就不说了&#xff0c;直接说结果。 我们通过网络搜索获取的键值和蓝牙模拟键盘传…

云专线的应用场景

云专线是连接用户本地数据中心和云上虚拟私有云的高安全、高速度、低延迟、稳定可靠的专属连接通道&#xff0c;主要有以下应用场景。 1、混合云环境&#xff1a;企业在私有云和公有云之间传输数据及部署应用时&#xff0c;使用云专线建立专用的网络连接&#xff0c;保证数据传…

做赴日IT工作 Java Python等语言哪个更好?

很多同学问我&#xff0c;做赴日IT工作Java&#xff0c;Python等语言哪个更好&#xff1f;更容易拿到内定通知书&#xff1f;如果你想去做赴日IT工作&#xff0c;无论是学Java还是Python或是其他编程语言&#xff0c;都是很好的选择&#xff0c;因为它们都有自己的的前景和应用…

如何快速完成MySQL数据的差异对比|NineData

在现代商业环境中&#xff0c;数据库是企业存储核心数据的重要工具&#xff0c;而 MySQL 作为最受欢迎的关系型数据库管理系统&#xff0c;广泛应用于各行各业。在容灾、数据迁移、备份恢复等场景下&#xff0c;为了确保两端或多端之间数据的一致性&#xff0c;通常需要对数据进…

【C++】多态(多态的构成条件,虚函数重写,override,final,覆盖隐藏对比)

文章目录 前言一、多态的定义及实现1.多态的构成条件&#xff1a; 二、虚函数1.虚函数的重写2.虚函数重写的例外&#xff08;协变&#xff09;3.析构函数的虚函数&#xff08;基类与派生类析构函数名字不同&#xff09;1.不加virtual的一般情况&#xff1a;2.不加virtual会出现…

Merge和Rebase的区别

Merge 和 Rebase 是 Git 中常用的两种分支整合方式&#xff0c;它们具有不同的工作原理和效果&#xff1a; Merge&#xff08;合并&#xff09; 合并是将两个或多个分支的提交历史合并为一个新的提交。在合并时&#xff0c;Git 会创建一个新的合并提交&#xff0c;将两个分支…

Android中简单封装Livedata工具类

Android中简单封装Livedata工具类 前言&#xff1a; 之前讲解过livedata和viewmodel的简单使用&#xff0c;也封装过room工具类&#xff0c;本文是对livedata的简单封装和使用&#xff0c;先是封装了一个简单的工具类&#xff0c;然后实现了一个倒计时工具类的封装. 1.LiveD…

让你的商城触达全球市场!了解跨境商城系统源码的优势

全球市场触达的商机 随着全球化趋势的不断发展&#xff0c;跨境电商已经成为企业开拓全球市场的重要途径之一。在扩大国际业务的同时&#xff0c;企业需要面对许多挑战&#xff0c;如语言、支付、物流等问题。这些问题可以通过使用跨境商城系统源码来解决。 一、多语言支持 跨境…

如何做好电信布线?

电信布线作为通信网络骨干&#xff0c;对于任何现代企业或组织来说都是至关重要的组成部分。随着业务量的持续增长&#xff0c;对电信布线安装提出了更高的要求。为此&#xff0c;飞速&#xff08;FS&#xff09;提出了FHD电信布线解决方案&#xff0c;在满足了电信机房要求的基…

源码分析——ConcurrentHashMap源码+底层数据结构分析

文章目录 1. ConcurrentHashMap 1.71. 存储结构2. 初始化3. put4. 扩容 rehash5. get 2. ConcurrentHashMap 1.81. 存储结构2. 初始化 initTable3. put4. get 3. 总结 1. ConcurrentHashMap 1.7 1. 存储结构 Java 7 中 ConcurrentHashMap 的存储结构如上图&#xff0c;Concurr…

【Vue3】localStorage读取数组并赋值的问题

问题描述 今天在写项目用到localStorage进行存储并读取数据&#xff0c;并将读取到的数据存放到列表的时候&#xff0c;发现vue3不能直接对数组进行赋值。因为Vue3的响应式是proxy&#xff0c;对所有的数据进行了拦截。 onBeforeMount(() > {console.log(JSON.parse(local…

C语言学习笔记 使用vscode外部console出现闪退-12

前言 在使用vscode的外部console时&#xff0c;会出现闪退现象&#xff0c;这是因为程序运行结束后&#xff0c;系统自动退出了终端&#xff08;终端机制决定的&#xff09;。我们可以在C程序结束后&#xff0c;使用system函数来暂停DOS终端系统&#xff0c;这样就可以完整地看…

中间件插件机制

一、插件 在mybatis一类中间件在处理的时候&#xff0c;提供了插件机制&#xff0c;类似于aop机制&#xff0c;可以在方法前、方法后进行拦截并且修改入参获得改变其方法的行为。那么调用的的方法应该也需要使用动态代理活动被插件进行aop的对象。

GD32F103硬件I2C0通讯

GD32F103的I2C模块有I2C0和I2C1;本程序使用I2C0功能模块; I2C0引脚复用和重映射: 当I2C0_REMAP0时,I2C0引脚复用功能,I2C0_SCL映射到PB6引脚,I2C0_SDA映射到PB7引脚; 当I2C0_REMAP1时,I2C0引脚重映射,I2C0_SCL映射到PB8引脚,I2C0_SDA映射到PB9引脚; I2C1引脚只有复用引脚: I2C…

Nevron Vision for .NET Crack

Nevron Vision for .NET Crack NET Vision是一个用于创建具有数据可视化功能的强大数据表示应用程序的套件。该套件具有用于.NET的Nevron Chart、用于.NET的Nevron Diagram和用于.NET的Nevron User Interface。精心设计的对象模型、众多功能和高质量的演示使复杂数据的可视化变…

观察级水下机器人使用系列之四二维前视声纳

本文主要讲观察级水下机器人Valor配套的二维前视声纳&#xff0c;它与超短基线定位、摄像头都是水下机器人导航的重要部件。二维声纳是Tritech公司生产的&#xff0c;型号为Gemini 720is。 ​编辑​ Gemini 720is主要技术参数见下表。 Gemini 720is通过一条蓝色的缆与机器人的…

Linux命令200例:wc用于统计文本文件中的字数、行数和字符数(常用)

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &…

字节C++后端面试总结

字节的面经,技术栈是 C++ 后端。 计算机网络 UDP和TCP区别 先说了概念一个是面向连接的基于字节流的可靠连接,一个是不需要连接的基于数据报的不可靠传输 然后说了几个小点,比如首部长度、应用场景、服务对象什么的。 补充: 还有一个很重要的点:UDP 的实时性比 TCP 好…

【培训】第一届深圳AI视觉项目研发与部署免费线下公开课启动!2023年8月底与我们相约,开启AI视觉之旅!...

人工智能&#xff08;AI&#xff09;时代来临&#xff0c;随着技术更新迭代&#xff0c;各行各业都因为深度学习技术而发生变革&#xff0c;技术人员的能力也需要不断更新。面向AI入门者&#xff0c;我们将在2023年下半年开启定期的线下教学&#xff0c;提供深度学习核心方法与…

网络安全进阶学习第十五课——Oracle SQL注入

文章目录 一、Oracle数据库介绍二、Oracle和MySQL的语法差异&#xff1a;三、Oracle的数据库结构四、Oracle的重点系统表五、Oracle权限分类1、系统权限2、实体权限3、管理角色 六、oracle常用信息查询方法七、联合查询注入1、order by 猜字段数量2、查数据库版本和用户名3、查…