element UI table合并单元格方法

news2024/11/24 10:48:43

废话不多讲,直接上代码,希望能帮到需要的朋友

  // 合并单元格
  function spanMethod({ row, column, rowIndex, columnIndex }) {
    //定义需要合并的列字段,有哪些列需要合并,就自定义添加字段即可
    const fields = ['declareRegion']   // 直接在里面添加需要合并的字段
    // 判断只合并定义字段的列数据
    // 当前行的数据
    const cellValue = row[column.property]
    let countRowspan = 1 //用于合并计数多少单元格
    if (cellValue && fields.includes(column.property)) {
      const prevRow = tableData.value[rowIndex - 1] //上一行数据
      let nextRow = tableData.value[rowIndex + 1] //下一行数据

      // 当上一行的数据等于当前行数据时,当前行单元格隐藏
      if (prevRow && prevRow[column.property] === cellValue && prevRow.declareRegion == row.declareRegion) {
        return { rowspan: 0, colspan: 0 }
      } else {
        // 反之,则循环判断若下一行数据等于当前行数据,则当前行开始进行合并单元格
        while (nextRow && nextRow[column.property] === cellValue && nextRow.declareRegion == row.declareRegion) {
          nextRow = tableData.value[++countRowspan + rowIndex]
        }
        if (countRowspan > 1) {
          return { rowspan: countRowspan, colspan: 1 }
        }
      }
    }
  }

表格上这么用就OK了

<el-table :data="tableData" border="1" :span-method="spanMethod">
  <el-table-column type="index" label="序号" align="center" width="100"/>
  <el-table-column prop="declareRegion" align="center" label="市(州)" width="150"/>
  <el-table-column prop="schoolName" align="center" label="学校(县、区+幼儿园具体名称)" :show-overflow-tooltip="true"/>
  <el-table-column prop="financialSupport" align="center" label="经费支持(万)" :show-overflow-tooltip="true"/>
</el-table>

上个效果,因为很多人要看是不是自己想的样式
在这里插入图片描述
是这个效果的就拿走吧,笔芯~

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

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

相关文章

智能工业电脑在智慧电力中实现全程实时监控与调控

可视化编程工业电脑在化工、石油、电力等行业过程控制领域扮演着越来越重要的角色。这些基于ARM架构设计的嵌入式工业计算机凭借其高性能、低功耗以及出色的实时处理能力&#xff0c;有效提升了各行业生产过程的安全性和效率。 钡铼技术ARMxy系列采用嵌入式Linux 系统开发的产品…

Idea中 maven 下载jar出现证书问题

目录 1&#xff1a; 具体错误&#xff1a; 2&#xff1a; 忽略证书代码&#xff1a; 3&#xff1a; 关闭所有idea&#xff0c; 清除缓存&#xff0c; 在下面添加如上忽略证书代码 4&#xff1a;执行 maven clean 然后刷刷新依赖 完成&#xff0c;撒花&#xff01;&#x…

AIoT人工智能物联网----刷机、系统安装、示例、摄像头等

软件链接见文末 1. jetson nano硬件介绍 载板 模组卡座:放置核心板 micro SD卡接口:插SD卡,将操作系统写入SD卡,然后插入;建议至少为32GB。当然根据使用情况可以是64GB;卡的质量一定要好,读写速度快。之前买了同品牌128G的比64G的慢很多。所以大小合适就好M.2 Key E …

spark本地模拟多个task时如何启动多个Excutor

1、首先在9090端口下启动Excutor,作为第一个Excutor 2、然后修改9090端口为&#xff1a;9091&#xff0c;如下图点击Edit Configration 3、然后按下图操作 &#xff0c; 4、修改一下名字 5、点击apply&#xff0c;&#x1f197; 6、检查下面圈1是否是刚刚我们新建的MyExcutor(2…

基于PSO优化的CNN-GRU-Attention的时间序列回归预测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1卷积神经网络&#xff08;CNN&#xff09;在时间序列中的应用 4.2 GRU网络 4.3 注意力机制&#xff08;Attention&#xff09; 5.算法完整程序工程 1.算法运行效果图预览 优化前 优化…

【架构师】-- 浅淡架构的分类

什么是架构&#xff1f; 说到架构&#xff0c;这个概念没有很清晰的范围划分&#xff0c;也没有一个标准的定义&#xff0c;每个人的理解可能都不一样。 架构在百度百科中是这样定义的&#xff1a;架构&#xff0c;又名软件架构&#xff0c;是有关软件整体结构与组件的抽象描…

LeetCode 377——组合总和 Ⅳ

阅读目录 1. 题目2. 解题思路3. 代码实现 1. 题目 2. 解题思路 此题一看应该就是需要用到动态规划算法&#xff0c;假设我们以 f[d]表示总和为 d 的元素组合的个数&#xff0c;首先&#xff0c;我们遍历 nums 数组&#xff0c; 如果有 nums[i] < target&#xff0c;那么组…

React ant 点击导航条闪烁

问题 : 点击当前位置会出现闪一下的效果 另一种点击方式 , 不会闪 原因 : 没有传递具体的参数给点击事件 , 导致在函数内部无法准确判断要展示哪个子菜单&#xff0c;可能导致页面状态的短暂变化&#xff0c;出现闪烁效果 代码 : // 左侧子菜单弹出const showSonMenu routeK…

Word 画三线表模板---一键套用

1、制作三线表 1&#xff09;设置为无边框 选中表格&#xff0c;点击「右键」——「边框」——「无框线」。 2&#xff09;添加上下边框线 选中表格后&#xff0c;点击【右键】——【表格属性】——【边框和底纹】&#xff0c;边框线选择【1.5磅】&#xff0c;然后点击【上框…

(WSI分类)WSI分类文献小综述 2024

2024的WSI分类。 Multiple Instance Learning Framework with Masked Hard Instance Mining for Whole Slide Image Classification &#xff08;ICCV2024&#xff09; 由于阳性组织只占 Gi- gapixel WSI 的一小部分&#xff0c;因此现有的 MIL 方法直观上侧重于通过注意力机…

算法:day1

前缀树&#xff1a; class Trie {private Trie[] childrenIndex;// 该节点下一个可能出现的所有字符的链接private boolean isEnd;// 该节点是否是最后一个字符// 初始化根节点public Trie() {childrenIndex new Trie[26];isEnd false;}public void insert(String word) {// …

ArcGIS Desktop使用入门(四)工具箱——属性域

系列文章目录 ArcGIS Desktop使用入门&#xff08;一&#xff09;软件初认识 ArcGIS Desktop使用入门&#xff08;二&#xff09;常用工具条——标准工具 ArcGIS Desktop使用入门&#xff08;二&#xff09;常用工具条——编辑器 ArcGIS Desktop使用入门&#xff08;二&#x…

从ChatGPT到多模态大模型:现状与未来(多模态)

ChatGPT 训练的核心技术主要包括: 预训练语言模型;有监督微调;基于人类反馈的 强 化 学 习 (ReinforcementLearningfrom Human Feedback,RLHF) 首先,通过自监督预训练使语言模型从大规模语料库中学习语言规律,具备基础 理解和生成能力;然后,通过构造指令微调数据集 并对模型进…

部署GlusterFS群集

目录 一、部署GlusterFS群集 1. 服务器节点分配 2. 服务器环境&#xff08;所有node节点上操作&#xff09; 2.1 关闭防火墙 2.2 磁盘分区&#xff0c;并挂载 2.3 修改主机名&#xff0c;配置/etc/hosts文件 3. 安装、启动GlusterFS&#xff08;所有node节点上操作&…

34. UE5 RPG实现鼠标点击移动

在前面&#xff0c;我们实现过使用键盘按键wasd去实现控制角色的移动&#xff0c;现在&#xff0c;我们实现了InputAction按键触发&#xff0c;后面&#xff0c;实现一下通过鼠标点击地面实现角色移动。 我们将实现两种效果的切换&#xff0c;如果你点击地面快速松开&#xff0…

​如何使用 ArcGIS Pro 制作带贴图建筑

对于用GIS软件制作三维建筑&#xff0c;很多时候都是制作的建筑体块&#xff0c;这里为大家介绍一下怎么使用 ArcGIS Pro 制作带贴图的建筑&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的数据是从水经微图中下载的建筑数据&#xff0c;除了建筑数据&#xff0c;常见…

浏览器工作原理与实践--渲染流水线:CSS如何影响首次加载时的白屏时间

在上一篇文章中我们详细介绍了DOM的生成过程&#xff0c;并结合具体例子分析了JavaScript是如何阻塞DOM生成的。那本文我们就继续深入聊聊渲染流水线中的CSS。因为CSS是页面中非常重要的资源&#xff0c;它决定了页面最终显示出来的效果&#xff0c;并影响着用户对整个网站的第…

大话设计模式——18.策略模式(Strategy Pattern)

简介 是一系列算法的封装&#xff0c;即做的事情相同&#xff08;方法名称相同&#xff09;但是实现的方式不同&#xff0c;以相同方式调用所有的算法&#xff0c;减少算法与使用算法的耦合。直接调用方法。 UML图 应用场景 Java AWT中的LayoutManager&#xff08;布局管理器&…

开源铱塔切换MySQL数据库启动报异常

1.错误日志&#xff1a; 铱塔切换数据库配置为MySQL之后&#xff0c;启动后报错如下&#xff1a; SqlExceptionHelper - Table iotkit.task_info doesnt exist SqlExceptionHelper - Table iotkit.rule_info doesnt exist SqlExceptionHelper - Table iotkit.device_info does…

微软称在量子纠错领域取得大进展,量子超级计算机能在2033年问世?

大数据产业创新服务媒体 ——聚焦数据 改变商业 自从物理学家费曼&#xff08;Richard Feynman&#xff09;在80年代首次提出了利用量子力学原理进行计算的概念&#xff0c;无数科学家就梦想着用量子计算重塑未来。可惜现实往往“磕磕绊绊”&#xff0c;40多年过去了&#xff…