如上图,实现单元格合并功能,不多说,直接上代码

一,添加    :span-method="objectSpanMethod"

<el-table
:key="timer1"
:data="tableData"
:span-method="objectSpanMethod"
style="width: 100%"
cell-class-name="cellStyle"
highlight-current-row
>

二,objectSpanMethod方法计算合并

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { //第一列 下标为0
if (rowIndex === 0) { //第一列下的第一行 下标为0
return {
rowspan: 4, //向下合并4个
colspan: 1
};
}else{ //其他的不变
return {
rowspan: 0,
colspan: 0
};
}
}else if(columnIndex === 4){ //第四列也需要合并 同理
if (rowIndex === 0) {
return {
rowspan: 4,
colspan: 1
};
}
}else if(columnIndex === 5){ //第五列也需要合并 同理
if (rowIndex === 0) {
return {
rowspan: 4,
colspan: 1
};
}
}
},

第二种情况:每一列都有两个合并行  方法类似,无非每一列多了一个行的合并

objectSpanMethod_two({ row, column, rowIndex, columnIndex }){
if (columnIndex === 0) { //第一列
if (rowIndex === 0) { //第一行 需要合并4个单元格
return {
rowspan: 4,
colspan: 1
};
}else if (rowIndex === 4){ //第四行,需要合并下面四个单元格
return {
rowspan: 4,
colspan: 1
};
}else { //其他不变,这个一定不能漏了
return {
rowspan: 0,
colspan: 0
};
}
}else if(columnIndex === 4){
if (rowIndex === 0) {
return {
rowspan: 4,
colspan: 1
};
}else if (rowIndex === 4){
return {
rowspan: 4,
colspan: 1
};
}
}else if(columnIndex === 5){
if (rowIndex === 0) {
return {
rowspan: 4,
colspan: 1
};
}else if (rowIndex === 4){
return {
rowspan: 4,
colspan: 1
};
}
}
},

table表格的合并的更多相关文章

  1. 【HTML】table表格拆分合并(colspan、rowspan)

    代码演示 横向合并: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...

  2. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  3. 普通table表格样式及代码大全(全)

    普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...

  4. ASP.NET中重复表格列合并的实现方法(转自脚本之家)

    这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...

  5. 自设table表格,获取内容,并经弹出框的url传参,获取结果显示在弹出框,并加载合计

    table表格,选择框 form id="editForm1"> <table class="table_form"> <td > ...

  6. CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并

    本文内容: 表格边框合并 兄弟标签外边距合并 父子标签的外边距合并 首发日期:2018-05-01 表格边框合并: 发生情况: 当设置了cellpadding="0" cellsp ...

  7. 【table】给table表格设置一个通用的css3样式(默认有斑马条纹)

    /* = 表格(默认有斑马条纹) ------------------------------------------ */ .data-table { margin: 10px 0; } .data ...

  8. html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用

    <!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...

  9. bootstrap table表格属性、列属性、事件、方法

    留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...

  10. 普通table表格样式及代码大全

     普通table表格样式及代码大全(全)(一) 单实线边框表格 <table style="border-collapse: collapse" borderColor=#0 ...

随机推荐

  1. Bert不完全手册9. 长文本建模 BigBird & Longformer & Reformer & Performer

    这一章我们来唠唠如何优化BERT对文本长度的限制.BERT使用的Transformer结构核心在于注意力机制强大的交互和记忆能力.不过Attention本身O(n^2)的计算和内存复杂度,也限制了Tr ...

  2. Go_Channel详解

    一 channel介绍 单纯地将函数并发执行是没有意义的.函数与函数间需要交换数据才能体现并发执行函数的意义. 虽然可以使用共享内存进行数据交换,但是共享内存在不同的goroutine中容易发生竞态问 ...

  3. Hive 自定义UDF操作步骤

    Hive 自定义UDF操作步骤 需要自定义类,然后继承UDF 然后在方法envluate()方法里面实现具体的业务逻辑,打包上传到linux(以免出错打包成RunningJar) 一.创建临时函数 ( ...

  4. Mysql主从配置步骤与各种错误

    测试环境: 2台腾讯云服务器.CentOS 7.2 64位,1G,lnmp. PHP:5.6:Mysql:5.5 两台干净的服务器 下面开始配置主服务器(master) 1.修改配置:  log-bi ...

  5. .NET6打包部署到Windows Service

    1.安装Nuget包 安装以下nuget包支持windows service <PackageReference Include="Microsoft.AspNetCore.Hosti ...

  6. 【原创】All in One i.MXRT1050/RT1020 SPI Flash Algorithm for J-Flash

    2020年,这个给大家一种很漫长的恍惚感的一年,终于是过去了.这一年我们很多新的人生第一次就这么被发生了,第一次居家办公这么长时间(很多人肥膘都长了不少,我却瘦了2斤,不知是工作太积极了还是被家里小怪 ...

  7. C# Interlocked 类

    [前言] 在日常开发工作中,我们经常要对变量进行操作,例如对一个int变量递增++.在单线程环境下是没有问题的,但是如果一个变量被多个线程操作,那就有可能出现结果和预期不一致的问题. 例如: stat ...

  8. Springboot结构梳理

    springboot各层关系梳理 1.基本流程 View层-->Controller层(响应用户请求):导入 service层,调用你service方法,controller通过接受前端传来的参 ...

  9. RabbitMq发布确认

    RabbitMq发布确认 发布确认原理 生产者将信道设置成 confirm 模式,一旦信道进入 confirm 模式,所有在该信道上面发布的消息都将会被指派一个唯一的 ID(从 1 开始),一旦消息被 ...

  10. 2022春每日一题:Day 15

    题目:Balanced lineup 题目说的很清楚了,没有修改,直接RMQ,模板题. 代码: #include <cstdio> #include <cstdlib> #in ...