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

一,添加    :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. PAT (Basic Level) Practice 1004 成绩排名 分数 20

    读入 n(>0)名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式: 每个测试输入包含 1 个测试用例,格式为 第 1 行:正整数 n 第 2 行:第 1 个学生的 ...

  2. golang channel底层结构和实现

    一.介绍 Golang 设计模式: 不要通过共享内存来通信,而要通过通信实现内存共享 channel是基于通信顺序模型(communication sequential processes, CSP) ...

  3. 2022.9.17 Java第二次课总结

    以下是本节课后的问题 首先是关于静态变量 在类中,使用 static 修饰符修饰的属性(成员变量)称为静态变量,也可以称为类变量,常量称为静态常量,方法称为静态方法或类方法,它们统称为静态成员,归整个 ...

  4. 使用SqlDataReader对象从数据库中检索只读的数据。

    SqlDataReader对象每次从查询结果中读取一行到内存中,对于sql数据库,如果只需要顺序读取,可以优先选择SqlDataReader,其对数据库的读取速度非常快. 调用SqlDataReade ...

  5. JavaWeb505错误,IDEA版问题解决

    问题描述: 在学习JavaWeb的过程中,使用JSP文件转至servlet文件的过程中,发现无论如何都无法打开文件 JSP文件代码 <%@page contentType="text/ ...

  6. 【C++】spdlog光速入门,C++logger最简单最快的库

    参考文档:https://spdlog.docsforge.com/master/ spdlog简介 Very fast, header only, C++ logging library. 一个he ...

  7. 聊聊GPU与CPU的区别

    目录 前言 CPU是什么? GPU是什么? GPU与CPU的区别 GPU的由来 并行计算 GPU架构优化 GPU和CPU的应用场景 作者:小牛呼噜噜 | https://xiaoniuhululu.c ...

  8. 实战中的sudo提权漏洞的使用姿势(CVE-2021-3156)

    实战中的sudo提权漏洞的使用姿势 免责声明: 0x00 漏洞概述 0x01 漏洞原理 0x02 受影响版本 0x03 不受影响版本 0x04 漏洞复现(centos) 复现POC1: 复现POC2: ...

  9. PHPMQTT问题一二三

    问题一:PHPMQTT作为客户端订阅超过一定数量的主题后,系统就会报错. 思路:在网上查找原因,失败: 打开调试debug = true ; 结果proc方法中报错: eof receive 问题二: ...

  10. Day21:方法重写以及注意细节

    目录 方法重写 什么是方法重写? 方法重写有什么用? 方法重写的注意细节 方法重写 什么是方法重写? 方法重写指的是当子类和父类出现了一摸一样的方法声明 方法重写有什么用? 当父类中有一个方法时,子类 ...