el-table实现指定列合并

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.mfbz.cn/a/68930.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

在Qt中使用LoadLibrary无法加载DLL

Qt系列文章目录 文章目录 Qt系列文章目录前言一、问题分析 前言 最近因项目需要使用qt做开发&#xff0c;之前使用LoadLibrary加载dll成功&#xff0c;很庆幸&#xff0c;当一切都那么顺风顺水的时候&#xff0c;测试同事却发现&#xff0c;在windows平台上个别电脑上加载dll会…

在windows中使用parLapply函数执行并行计算

目录 1-lapply()函数介绍&#xff1a; 例子1&#xff1a; 例子2&#xff1a; 例子3&#xff1a; 2-在Windows使用并行计算&#xff0c;使用parLapply()函数 2.1-并行计算的准备阶段&#xff1a; 2.2-parLapply()函数介绍 2.3-使用parLapply()函数编写执行并行计算 2.4-…

ECRS工时分析:什么叫标准化作业管理?为什么要进行作业标准化管理

中国自古就有标准化。《孙子兵法》中&#xff0c;孙子训练射箭&#xff0c;射箭的姿势是“标准化操作”&#xff1b;中国武术中的套路是“标准化”&#xff1b;在中国古诗中&#xff0c;字数甚至被“标准化”来打开中国历史&#xff0c;“标准化”作业的例子数不胜数。 而在工厂…

国内常用的可视化工具软件,请收藏

可视化不单单指数据可视化&#xff0c;还包含了信息可视化、2D可视化、3D可视化等&#xff0c;可视化工具为前端设计人员提供了一种更简单的方法来创建可视化的表示形式。它们通常通过拖拉拽组件的形式实现可视化效果。 根据不同的项目需求选择合适的可视化工具将节省大量时间…

JavaSpring加载properties文件

手动加载 #properties文件 jdbc.driver1 <?xml version"1.0" encoding"UTF-8"?> <!-- 开启context命名空间--> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XM…

Linux系统调试课:Linux Kernel Printk

🚀返回专栏总目录 文章目录 0、printk 说明1、printk 日志等级设置2、屏蔽等级日志控制机制3、printk打印常用方式4、printk打印格式0、printk 说明 在开发Linux device Driver或者跟踪调试内核行为的时候经常要通过Log API来trace整个过程,Kernel API printk()是整个Kern…

PyTorch深度学习环境安装(Anaconda、CUDA、cuDNN)及关联PyCharm

1. 关系讲解 Tytorch&#xff1a;Python机器学习库&#xff0c;基于Torch&#xff0c;用于自然语言处理等应用程序 Anaconda&#xff1a;是默认的python包和环境管理工具&#xff0c;安装了anaconda&#xff0c;就默认安装了conda CUDA&#xff1a;CUDA是一种由显卡厂商NVIDI…

MPAS-A原理及陆面模式的基本概念

跨尺度预测模式&#xff08;The Model for Prediction Across Scales - MPAS&#xff09;是由洛斯阿拉莫斯实验室和美国国家大气研究中心(NCAR)共同开发&#xff0c;其由3个部分组成&#xff0c;分别称为 MPAS-A&#xff08;大气模型&#xff09;、MPAS-O&#xff08;海洋模型&…

上下拉电阻

(一)上拉电阻&#xff1a;1、当TTL电路驱动COMS电路时&#xff0c;如果TTL电路输出的高电平低于COMS电路的最低高电平&#xff08;一般为3.5V&#xff09;&#xff0c;这时就需要在TTL的输出端接上拉电阻&#xff0c;以提高输出高电平的值。2、OC门电路必须加上拉电阻&#xff…

ffmpeg工具实用命令

说明&#xff1a;ffmpeg是一款非常好用的媒体操作工具&#xff0c;包含了许多对于视频、音频的操作&#xff0c;有些视频播放器&#xff0c;实际上就是套了一个ffmpeg的壳子。本文介绍ffmpeg的使用以及一些较为实用的命令。 安装 ffmpeg是命令行操作的&#xff0c;不需要安装…

PlanetScale vs. Neon - MySQL 和 Postgres 间的第二仗

本文为「数据库全方位对比系列」第三篇&#xff0c;该系列的前两部作品为&#xff1a; 全方位对比 Postgres 和 MySQL全方位对比 Postgres 和 MongoDB 根据 2023 年 Stack Overflow 调研&#xff0c;Postgres 已经取代 MySQL 成为最受欢迎和渴望的数据库了。 看起来 MySQL 和 …

中国首份仿生机器人产业全景报告发布!大模型带来加速度,三大指标决定竞争格局

AGI火热发展&#xff0c;让仿生机器人的实现补全了最后一块重要拼图。 一直以来&#xff0c;仿生机器人都代表人类对于科技的一种终极想象&#xff0c;备受产业圈热捧。 马斯克、雷军等&#xff0c;纷纷押注这一赛道。特斯拉全尺寸仿生机器人Optimus、小米全尺寸通用人形机器…

STM32芯片的内部架构介绍

STM32芯片由内核和片上外设两部分组成。STM32F103采用Cortex-M3内核&#xff0c;该内核由ARM公司设计。芯片生产厂商ST则负责在内核之外设计部件并生产整个芯片。这些内核之外的部件被称为核外外设或片上外设&#xff0c;如GPIO、USART&#xff08;串口&#xff09;、I2C、SPI等…

数据安全是企业发展之基,WorkPlus纯内网私有化部署保护隐私更安全

数字化时代&#xff0c;数据是企业生产、经营、战略等几乎所有经营活动所依赖、不可或缺的信息。企业通过数据资产管理&#xff0c;对外可以为客户提供更好的产品和服务&#xff0c;在组织内部又可以降低成本、提高效率、控制风险。所以&#xff0c;数据的价值和重要性不言而喻…

什么是智慧工地和智慧工地源码?

智慧工地将更多人工智能、传感技术、虚拟现实等高科技技术植入到建筑、机械、人员穿戴设施、场地进出关口等各类物体中&#xff0c;并且被普遍互联&#xff0c;形成“物联网”&#xff0c;再与“互联网”整合在一起&#xff0c;实现工程管理干系人与工程施工现场的整合。智慧工…

【uniapp】滚动相关

1、滚动到一定区域&#xff0c;顶部内容置换并置顶 功能&#xff1a; 当我向下滚动时&#xff0c;当关注那一行快到顶部的时候&#xff0c;把左侧区域的内容切换成右侧区域的内容&#xff0c;并置顶 原先我使用v-if来显示隐藏&#xff0c;发现会出现闪屏的现象&#xff0c;后来…

修改el-select和el-input样式;修改element-plus的下拉框el-select样式

修改el-select样式 .select_box{// 默认placeholder:deep .el-input__inner::placeholder {font-size: 14px;font-weight: 500;color: #3E534F;}// 默认框状态样式更改:deep .el-input__wrapper {height: 42px;background-color: rgba(0,0,0,0)!important;box-shadow: 0 0 0 …

栈和队列经典面试题

目录 一、括号匹配问题 20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09; 题目 思路 完整代码 二、用队列实现栈 225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09; 题目 思路 代码实现 构造一个栈 用队列实现栈的接口 第一个接口&#xff1a;创建…

小白到运维工程师自学之路 第七十二集 (半自动yum安装k8s集群)

一、准备环境 修改主机名 hostnamectl set-hostname k8s-master hostnamectl set-hostname k8s-node1 hostnamectl set-hostname k8s-node2 bashvim /etc/hosts 192.168.77.14 k8s-master 192.168.77.15 k8s-node1 192.168.77.16 k8s-node2 下载阿里源 wget -O /etc/yum…

华为路由器:IPSec加密GRE通道(GRE over IPsec)

IPSec加密GRE通道 由于GRE隧道不提供安全性保障&#xff0c;使用ipsec加密gre隧道是现网中比较常用的VPN部署&#xff0c;它的加密方式分为两种&#xff1a; 可以使用IPsec来加密隧道进行传输&#xff0c;叫做IPsec over GRE&#xff1b; 加密数据流后从隧道传输&#xff0c;…
最新文章