table表格的合并

如上图,实现单元格合并功能,不多说,直接上代码
一,添加 :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表格的合并的更多相关文章
- 【HTML】table表格拆分合并(colspan、rowspan)
代码演示 横向合并: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...
- 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
- 普通table表格样式及代码大全(全)
普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...
- ASP.NET中重复表格列合并的实现方法(转自脚本之家)
这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...
- 自设table表格,获取内容,并经弹出框的url传参,获取结果显示在弹出框,并加载合计
table表格,选择框 form id="editForm1"> <table class="table_form"> <td > ...
- CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并
本文内容: 表格边框合并 兄弟标签外边距合并 父子标签的外边距合并 首发日期:2018-05-01 表格边框合并: 发生情况: 当设置了cellpadding="0" cellsp ...
- 【table】给table表格设置一个通用的css3样式(默认有斑马条纹)
/* = 表格(默认有斑马条纹) ------------------------------------------ */ .data-table { margin: 10px 0; } .data ...
- html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用
<!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...
- bootstrap table表格属性、列属性、事件、方法
留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...
- 普通table表格样式及代码大全
普通table表格样式及代码大全(全)(一) 单实线边框表格 <table style="border-collapse: collapse" borderColor=#0 ...
随机推荐
- MES会成为象ERP一样的标准产品吗?
首先ERP不是完全的标准产品,只是标准化程度高低的问题,即使是头部ERP品牌产品也一样,包括SAP对每个企业都有客制,并且随着企业的成长变化也会跟着变,所以SAP就有"Rise With S ...
- [题解] LOJ 3300 洛谷 P6620 [省选联考 2020 A 卷] 组合数问题 数学,第二类斯特林数,下降幂
题目 题目里要求的是: \[\sum_{k=0}^n f(k) \times X^k \times \binom nk \] 这里面出现了给定的多项式,还有组合数,这种题目的套路就是先把给定的普通多项 ...
- KubeEdge SIG AI发布首个分布式协同AI Benchmark调研
摘要:AI Benchmark旨在衡量AI模型的性能和效能. 本文分享自华为云社区<KubeEdge SIG AI发布首个分布式协同AI Benchmark调研>,作者:KubeEdge ...
- 虚拟化_Xen——敬请期待!
更改Workstation兼容性为12.x,选择系统版本为RHEL6-64位,安装XenServer7.6成功!
- Visual Studio(VS)修改C语言scanf等报错
1.在程序最前面加:#define_CRT_SECURE_NO_DEPRECATE 2.按照vs规定进行修改,例如把scanf改为scanf_s: 3.在"项目" -> &q ...
- 获取不同机型微信小程序状态栏+导航栏高度
获取不同机型微信小程序状态栏+导航栏高度 一. 前言 很多时候我们开发微信小程序,都需要先知道状态栏和导航栏的高度,才能去做其他功能 二. 获取微信小程序状态栏高度 用wx.getSystemInfo ...
- iptables综合实验: 两个私有网络的互相通迅
环境准备: 主机A IP:192.168.0.6/24 网关改为192.168.0.8 firewallA IP:eth1 192.168.0.8/24 eth0 10.0.0.8/24 删除默认路由 ...
- Element基本组件
Element按钮组件: <el-row> <el-button>默认按钮</el-button> <el-button type="primary ...
- JK触发器与模12计数器
JK触发器 JK触发器具有保持,置0,置1和翻转四个功能. 则可得出次态方程:\(Q_{n+1} = JQ_n'+K'Q_n\) Design `timescale 1ns / 1ps module ...
- VideoPipe可视化视频结构化框架新增功能详解(2022-11-4)
VideoPipe从国庆节上线源代码到现在经历过了一个月时间,期间吸引了若干小伙伴的参与,现将本阶段新增内容总结如下,有兴趣的朋友可以加微信拉群交流. 项目地址:https://github.com/ ...