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

一,添加    :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. P1600 [NOIP2016 提高组] 天天爱跑步 (树上差分)

    对于一条路径,s-t,位于该路径上的观察员能观察到运动员当且仅当以下两种情况成立:(d[ ]表示节点深度) 1.观察员x在s-lca(s,t)上时,满足d[s]=d[x]+w[x]就能观察到,所以我们 ...

  2. Windows常用快捷键及基本的Dos命令

    Windows 常用快捷键 Ctrl + C: 复制 Ctrl + V: 粘贴 Ctrl + A: 全选 Ctrl + X: 剪贴 Ctrl + Z: 撤销 Ctrl + S: 保存 Alt + F4 ...

  3. 关于JDK8中stream的用法小总结。

    import java.io.Serializable; import java.util.*; import java.util.stream.Collectors; public class Ma ...

  4. Bootstrap‘s JavaScript requires jQuery

    1.遇到的第一个问题:modal.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery at modal.js:6 2.遇到的第二个问 ...

  5. 齐博x2模型里边钩子的创建与使用

    在模型里边的钩子创建与使用方法跟在控制器里边的钩子创建及使用方法是有所区别的在模型里边创建的钩子,你可以理解为执行一个函数,是无法调用模型里边的类的方法及属性的.比如系统文件\application\ ...

  6. python基础之if条件控制语句

    前言 本文主要介绍控制流程中的if条件语句,包括if...:if...else...:if...elif...elif...else...:if...if...if...else...:if嵌套等.内 ...

  7. 【多服务场景化解决方案】AR虚拟技术助力智能家装

    ​ 1 .介绍 总览 本应用采用了华为图形引擎服务的AR虚拟技术,您可以在手机相机里摆放想要购置的家具家电,交互式体验让您可以轻松操控它们的3D图例,以此来确定这些家具家电是否适合摆放在您的家里. 特 ...

  8. 题解 SP24 FCTRL2 - Small factorials

    双倍经验. 题意 给\(t\) 组数据,求每组数据中\(n\) 的阶乘. 思路 \(n≤100\) . \(100!\) 肯定爆int128,所以高精呗. 那么就是一个阶乘的板子了,应该不难的吧. 具 ...

  9. Golang-Gin Response 统一返回restful格式的数据

    目的: gin返回restful格式的数据,返回的200,201 的数据 也包括异常时的404/500等情况 直接调用即可 package response import ( "github ...

  10. 网页状态码(HTTP状态码)。

    网页状态码(HTTP状态码). 状态码 说明 详情 100 继续 请求者应当继续提出请求.服务器已收到请求的一部分,正在等待其余部分. 101 切换协议 请求者已要求服务器切换协议,服务器已确认并准备 ...