el-table动态合并

废话就不多说了,直接上代码!!!

合并行

// 方法一
<template>
  <div class="container">
    <el-table :data="dataSource" :border="true"
      :header-cell-style="{ 'font-weight': 'normal', 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }" size="mini" style="width: 100%" :span-method="arraySpanMethod">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="product_name" label="辅助"></el-table-column>
      <el-table-column prop="cap_name" label="法师"></el-table-column>
      <el-table-column prop="name" label="刺客"></el-table-column>
      <el-table-column prop="name1" label="坦克"></el-table-column>
      <el-table-column prop="name2" label="射手"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'tableCom',
  data () {
    return {
      dataSource: [{
        product_name: '姜子牙',
        cap_name: '诸葛亮',
        name: '韩信',
        name1: '程咬金',
        name2: '狄仁杰'
      },
      {
        product_name: '蔡文姬',
        cap_name: '妲己',
        name: '孙悟空',
        name1: '廉颇',
        name2: '后裔'
      },
      {
        product_name: '蔡文姬',
        cap_name: '貂蝉',
        name: '橘右京',
        name1: '橘右京',
        name2: '孙尚香'
      },
      {
        product_name: '大桥',
        cap_name: '西施',
        name: '赵云',
        name1: '刘禅',
        name2: '刘禅'
      }]
    }
  },
  methods: {
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      // 合并行  产品名字相同合并
      if (columnIndex === 1) {
        if (rowIndex === 0 || row.product_name !== this.dataSource[rowIndex - 1].product_name) {
          let rowspan = 0
          this.dataSource.forEach(element => {
            if (element.product_name === row.product_name) {
              rowspan++
            }
          })
          return [rowspan, 1]
        } else {
          return [0, 0]
        }
      }
    }
  },
  created () {

  }
}
</script>
// 方法二
<template>
  <div class="container">
    <el-table :data="tableData" :border="true"
      :header-cell-style="{ 'font-weight': 'normal', 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }" size="mini" style="width: 100%" :span-method="handleSpanMethod">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="product_name" label="辅助"></el-table-column>
      <el-table-column prop="cap_name" label="法师"></el-table-column>
      <el-table-column prop="name" label="刺客"></el-table-column>
      <el-table-column prop="name1" label="坦克"></el-table-column>
      <el-table-column prop="name2" label="射手"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'tableCom',
  data () {
    return {
      tableData: [{
        product_name: '姜子牙',
        cap_name: '诸葛亮',
        name: '韩信',
        name1: '程咬金',
        name2: '狄仁杰'
      },
      {
        product_name: '蔡文姬',
        cap_name: '妲己',
        name: '孙悟空',
        name1: '廉颇',
        name2: '后裔'
      },
      {
        product_name: '蔡文姬',
        cap_name: '貂蝉',
        name: '橘右京',
        name1: '橘右京',
        name2: '孙尚香'
      },
      {
        product_name: '大桥',
        cap_name: '貂蝉',
        name: '赵云',
        name1: '刘禅',
        name2: '刘禅'
      }]
    }
  },
  methods: {
    handleSpanMethod ({ row, column, rowIndex }) {
      if (column.property === 'product_name' || column.property === 'cap_name') {
        // 获取当前行与上一行的属性值
        const currentProperty = row[column.property]
        const previousProperty = rowIndex > 0 ? this.tableData[rowIndex - 1][column.property] : null

        // 判断当前行与上一行的属性值是否相同
        if (currentProperty === previousProperty) {
          return {
            rowspan: 0, // 与上一行相同的属性值,设置跨行数为0,即不显示
            colspan: 1 // 不进行跨列
          }
        }

        // 查找后续行是否与当前行的属性值相同
        let rowspan = 1
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          if (this.tableData[i][column.property] === currentProperty) {
            rowspan++
          } else {
            break
          }
        }

        return {
          rowspan: rowspan, // 跨行数为相同属性值的行数
          colspan: 1 // 不进行跨列
        }
      }
    }
  },
  created () {

  }
}
</script>

效果图:

合并列:

<template>
  <div class="container">
    <el-table :data="dataSource" :border="true"
      :header-cell-style="{ 'font-weight': 'normal', 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }" size="mini" style="width: 100%" :span-method="arraySpanMethod">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="product_name" label="辅助"></el-table-column>
      <el-table-column prop="cap_name" label="法师"></el-table-column>
      <el-table-column prop="name" label="刺客"></el-table-column>
      <el-table-column prop="name1" label="坦克"></el-table-column>
      <el-table-column prop="name2" label="射手"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'tableCom',
  data () {
    return {
      dataSource: [{
        product_name: '姜子牙',
        cap_name: '诸葛亮',
        name: '韩信',
        name1: '程咬金',
        name2: '狄仁杰'
      },
      {
        product_name: '蔡文姬',
        cap_name: '妲己',
        name: '孙悟空',
        name1: '廉颇',
        name2: '后裔'
      },
      {
        product_name: '蔡文姬',
        cap_name: '貂蝉',
        name: '橘右京',
        name1: '橘右京',
        name2: '孙尚香'
      },
      {
        product_name: '大桥',
        cap_name: '西施',
        name: '赵云',
        name1: '刘禅',
        name2: '刘禅'
      }]
    }
  },
  methods: {
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      // 合并列 名称值都为“橘右京”、“刘禅” 的合并
      if (columnIndex > 2) {
        let colspan = 0
        const colkeys = Object.keys(row)
        const currentindex = columnIndex - 1
        if (row[colkeys[currentindex]] === '橘右京' || row[colkeys[currentindex]] === '刘禅') {
          if (row[colkeys[currentindex - 1]] !== row[colkeys[currentindex]]) {
            for (let i = currentindex; i < colkeys.length; i++) {
              if (row[colkeys[i]] === '橘右京' || row[colkeys[i]] === '刘禅') {
                colspan++
              } else {
                break
              }
            }
            return [1, colspan]
          } else {
            return [0, 0]
          }
        }
      }
    }
  },
  created () {

  }
}
</script>

效果图:

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

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

相关文章

Kafka常见生产问题详解

目录 生产环境常见问题分析 消息零丢失方案 1、生产者发消息到Broker不丢失 2、Broker端保存消息不丢失 3、消费者端防止异步处理丢失消息 消息积压如何处理 如何保证消息顺序 ​问题一、如何保证Producer发到Partition上的消息是有序的 问题二&#xff1a;Partition中…

深入解剖指针篇(2)

目录 指针的使用 strlen的模拟实现 传值调用和传址调用 数组名的理解 使用指针访问数组 一维数组传参的本质 冒泡排序 个人主页&#xff08;找往期文章&#xff09;&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 指针的使用 strlen的模拟实现 库函数strlen的功能是求字符串…

面试经典 150 题 -- 矩阵 (总结)

总的链接 : 面试经典 150 题 - 学习计划 - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台 36 . 有效的数独 模拟 : 用数组模拟哈希表来判断对应的行&#xff0c;列和当前元素所在的3*3方格中是否重复出现&#xff0c;是的话&#xff0c;直接return false…

基于C/C++的MFC的IDC_MFCEDITBROWSE2控件不显示ico问题记录

打开资源文件 *.rc文件 &#xff0c;在最上方添加 #if !defined(_AFXDLL) #include "afxribbon.rc" // MFC ribbon and control bar resources #endif 如下图所示&#xff1a;

【IC设计】Windows下基于IDEA的Chisel环境安装教程(图文并茂)

Chisel环境安装教程 第一步 安装jdk&#xff0c;配置环境变量第二步 安装sbt&#xff0c;不用配置环境变量第三步 安装idea社区版第四步 离线安装scala的idea插件第五步 配置sbt换源1.切换目录2.创建repositories文件3.配置sbtconfig.txt文件 第六步 使用chisel-tutorial工程运…

亚信安慧的AntDB数据库:稳定可靠的保障

亚信安慧AntDB数据库在运营商自主可控替换项目中的成功应用&#xff0c;具有极其重要的意义。该数据库的落地&#xff0c;不仅为这一项目注入了强大的支持力量&#xff0c;还在更大程度上提升了整体的运营效能。作为一种高效可靠的数据库解决方案&#xff0c;AntDB引入了先进的…

如何通过CVE漏洞编码找到对应的CVE漏洞详情及源码修改地址

背景&#xff1a; 最近正在使用docker进行一些cve漏洞的复现&#xff0c;有时候就要通过CVE的漏洞编码&#xff0c;找到对应的漏洞详情&#xff0c;以及漏洞的源码修改 以我上一篇文章的CVE-2020-17518编码为例 Apache Flink文件上Apache Flink文件上 方法&#xff1a; 通…

Mobileye CES 2024 自动驾驶新技术新方向

Mobileye亮相2024年国际消费类电子产品展览会推出什么自动驾驶新技术? Mobileye再次亮相CES&#xff0c;展示了我们的最新技术&#xff0c;并推出了Mobileye DXP--我们全新的驾驶体验平台。 与往年一样&#xff0c;Mobileye是拉斯维加斯展会现场的一大亮点&#xff0c;让参观…

bank conflict

前置知识&#xff1a; shared memory 被分成 32 个 bank一个 warp 32 个线程每个 bank 4 byte如果同一 warp 中不同线程访问同一 bank 的不同地址则发生 bank conflict 请注意需要是一个 warp 中的不同线程&#xff01;如果一个线程访问 shared memory 的两个元素&#xff0c;…

win11安装MySql5.7

1、下载 打开下载链接&#xff1a;MySQL :: Download MySQL Installer 2、安装 2.1、安装界面 2.2、选择自定义安装 2.3、根据自己系统的位数进行选择是X64还是X86 2.4、选择安装路径 2.5、继续下一步 2.6、选择服务器专用&#xff0c;端口是3306 2.7、设置密码 2.8、设置服…

数学建模 - 线性规划入门:Gurobi + python

在工程管理、经济管理、科学研究、军事作战训练及日常生产生活等众多领域中&#xff0c;人们常常会遇到各种优化问题。例如&#xff0c;在生产经营中&#xff0c;我们总是希望制定最优的生产计划&#xff0c;充分利用已有的人力、物力资源&#xff0c;获得最大的经济效益&#…

代码随想录 Leetcode77.组合

题目&#xff1a; 代码&#xff08;首刷看解析 2024年2月1日&#xff09;&#xff1a; class Solution { public:vector<vector<int>> res;vector<int> path;void backtracing(int n, int k, int startIndex) {if (path.size() k) {res.push_back(path);re…

【Linux C | I/O模型】Unix / Linux系统的5种IO模型 | 图文详解

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

嵌入式学习 Day16

一. 共用体 形式&#xff1a; union 共用体名 { 成员列表; //各个变量 }; //表示定义一个共用体类型 注意&#xff1a; 1.共用体 初始化 --- 只能给一个值&#xff0c;默认是给到第一个成员变量的 2.共用体成员变量 共用体用的数据最终存储的 --…

了解Ansible自动化运维工具及模块的使用

一、Ansible的相关知识 1.1 Ansible工具的了解 Ansible是一个基于Python开发的配置管理和应用部署工具&#xff0c;现在也在自动化管理领域大放异彩。它融合了众多老牌运维工具的优点&#xff0c;Pubbet和Saltstack能实现的功能&#xff0c;Ansible基本上都可以实现。Ansible…

aspose-words基础功能演示

我们在Aspose.Words中使用术语“渲染”来描述将文档转换为文件格式或分页或具有页面概念的介质的过程。我们正在讨论将文档呈现为页面。下图显示了 Aspose.Words 中的渲染情况。 Aspose.Words 的渲染功能使您能够执行以下操作&#xff1a; 将文档或选定页面转换为 PDF、XPS、H…

gitlab操作手册

git操作篇 1. 项目克隆 git clone gitgitlab.test.cn:pro/project1.git2. 项目的提交 注&#xff1a;如果要查看文件的状态可以用git status命令&#xff1a; 如上图所示&#xff0c;文件已经修改了。 3. 项目的推送 git push origin feature/test01注&#xff1a;如果要查…

【遥感入门系列】遥感分类技术之遥感解译

遥感的最终成果之一就是从遥感图像上获取信息&#xff0c;遥感分类是获取信息的重要手段。同时遥感图像分类也是目前遥感技术中的热点研究方向&#xff0c;每年都有新的分类方法推出。 本小节主要内容&#xff1a; 遥感分类基本概念常见遥感分类方法 1 遥感分类概述 遥感图…

【Qt】Json在Qt中的使用

Json JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;广泛用于互联网应用程序之间的数据传输。JSON基于JavaScript中的对象语法&#xff0c;但它是独立于语言的&#xff0c;因此在许多编程语言中都有对JSON的解析和生成支持。…

C++ 音视频流媒体浅谈

C流媒体开发 今天就浅浅聊一下C流媒体开发 流媒体开发中最常见的是FFmpeg&#xff08;编解码器&#xff09; 业务逻辑主要是播放器了&#xff08;如腾旭视频 爱奇艺等等&#xff09; FFmpeg是一个开源的音视频处理工具集&#xff0c;可以用于处理、转换和流媒体传输音视频…