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 ...
随机推荐
- 空 Maven项目转成 Web项目 & SpringMVC调用其他 Module中的方法可能会遇到的小问题
SpringMVC调用其他 模块内的方法的 坑 下次别在阴沟里翻船啦.. 一共花费 4个小时,解决项目中的这个问题 OMG 1. 首先是 Maven新建工程 一般使用 Maven都是先创建 空工程 当 ...
- .NET 7 RC 2 发布,倒计时一个月发布正式版
微软2022-10-22 发布了 .NET 7 RC 2,下一站是.NET 7正式发布,就在下个月Net Conf 2022(11月8日)期间正式发布. 经过长达一年时间的开发,.NET 7 规划的所 ...
- 前端性能优化——首屏时间&&白屏时间
1.首屏时间概念 首屏时间是指用户打开一个网站时,直到浏览器首页面内容渲染完成的时间. 2.白屏时间概念 白屏时间即是,浏览器开始显示内容的时间,所以我们一般认为解析完<head>的时刻, ...
- 七、docker镜像私有仓库
在Docker中,当我们执行 docker pull xxx 的时候 ,它实际上是从 hub.docker.com 这个地址去查找,这就是 Docker 公司为我们提供的公共仓库.在工作中,我们不可能 ...
- 二十六、StatefulSet资源控制器
StatefulSet资源控制器 一.statefulset介绍 StatefulSet 是为了解决有状态服务的问题而设计的资源控制器. 匹配 Pod name ( 网络标识 ) 的模式为:(stat ...
- iptables规则查询
iptables规则查询 之前在iptables的概念中已经提到过,在实际操作iptables的过程中,是以"表"作为操作入口的,如果你经常操作关系型数据库,那么当你听到" ...
- 【单片机入门】(四)应用层软件开发的单片机学习之路-----ESP32开发板PWM控制电机以及中断的使用
引言 各位大佬,晚上好啊,在上一篇博客中,我们讲了什么是UART串口通讯,以及使用USB转TTL使得单片机可以和c#上位机做一个串口通讯,接下来,为大家带来PWM的概念原理,以及实际案例,使用PWM对 ...
- python简单的tcp服务端
1 #!/usr/bin/python 2 # -*- coding: UTF-8 -*- 3 # 文件名:tcpserver.py 4 5 import socket 6 import time 7 ...
- Java Timer使用介绍
java.util包下提供了对定时任务的支持,涉及2个类: Timer:定时器类 TimerTask:任务抽象类 使用该定时任务我们需要继承TimerTask抽象类,覆盖run方法编写任务执行代码,并 ...
- Java安全之反序列化(1)
序列化与反序列化 概述 Java序列化是指把Java对象转换为字节序列的过程:这串字符可能被储存/发送到任何需要的位置,在适当的时候,再将它转回原本的 Java 对象,而Java反序列化是指把字节序列 ...