如何让elemengUI中的表格组件相同内容的单元格自动合并
1. 前言
这两天在工作中遇到这样一个需求:将某个Excel
中的数据在页面上以表格形式展示出来,并且尽量保持数据层级与Excel
中一致。在原始Excel
文件中,对每一行相同的数据都进行了合并,使得数据比较有层次性,而在页面表格中,也需要将相同内容的单元格进行合并。博主手头的项目使用的UI框架是elemengUI
,elemengUI
中的表格Table组件也提供了单元格合并的方法,并且给出了示例用法,但是在示例用法中是针对静态数据的,判断是写死的。而实际情况数据往往是动态的,我们需要去判断哪两个单元格内容相同然后动态的将它们合并。经过一阵折腾终于搞定了,这就来记录一下具体的实现方法,以供参考。
2. 效果图
话不多说,先看看效果图。
原始Excel
文档内容结构:
最终页面展示效果:
3. 核心代码
首先是表格结构:
<el-table
:data="data"
border
fit
stripe
:span-method="cellMerge"
highlight-current-row
size="small"
style="width: 100%;">
<el-table-column prop="ruleId_1" label="指标编码" align="center" width="100"></el-table-column>
<el-table-column prop="checkRange" label="检查范围" align="center" width="100"></el-table-column>
<el-table-column prop="ruleId_2" label="指标编码" align="center" width="100"></el-table-column>
<el-table-column prop="checkContent" label="检查内容" align="center" width="100"></el-table-column>
<el-table-column prop="ruleId_3" label="指标编码" align="center" width="120"></el-table-column>
<el-table-column prop="checkItem" label="检查项" align="center" width="300"></el-table-column>
<el-table-column prop="ruleId_4" label="指标编码" align="center" width="200"></el-table-column>
<el-table-column prop="checkPoint" label="检查要点" align="left" header-align="center"></el-table-column>
</el-table>
数据data:
export default {
name:'levelProtect',
data () {
return {
data:[], //表格数据
spanArr: [],//二维数组,用于存放单元格合并规则
position: 0,//用于存储相同项的开始index
}
}
方法methods:
created() {
this.getTableData()
},
methods:{
// 从后端获取表格数据
getTableData() {
let para = {};
axios({
method: "post",
url: "...",
data: para
})
.then(res => {
this.data = res.data || [];
this.rowspan(0,'ruleId_1');
this.rowspan(1,'checkRange');
this.rowspan(2,'ruleId_2');
this.rowspan(3,'checkContent');
this.rowspan(4,'ruleId_3');
this.rowspan(5,'checkItem');
this.rowspan(6,'ruleId_4');
this.rowspan(7,'checkPoint');
})
.catch(err => {});
},
rowspan(idx, prop) {
this.unit.spanArr[idx] = [];
this.unit.position = 0;
this.unit.data.forEach((item,index) => {
if( index === 0){
this.unit.spanArr[idx].push(1);
this.unit.position = 0;
}else{
if(this.unit.data[index][prop] === this.unit.data[index-1][prop] ){
this.unit.spanArr[idx][this.unit.position] += 1;//有相同项
this.unit.spanArr[idx].push(0); // 名称相同后往数组里面加一项0
}else{
this.unit.spanArr[idx].push(1);//同列的前后两行单元格不相同
this.unit.position = index;
}
}
})
},
//表格单元格合并
cellMerge({ row, column, rowIndex, columnIndex }) {
for(let i = 0; i<this.spanArr.length; i++) {
if(columnIndex === i){
const _row = this.unit.spanArr[i][rowIndex];
const _col = _row>0 ? 1 : 0;
// console.log('第'+rowIndex+'行','第'+i+'列','rowspan:'+_row,'colspan:'+_col)
return {
rowspan: _row,
colspan: _col
}
}
}
}
}
代码说明:
- 在组件加载时,调用
getTableData
方法从后端拉取表格数据; - 得到表格数据后,我们把需要相同内容单元格合并的列通过调用
this.rowspan(0,'ruleId_1');
,得到的spanArr
二维数组表示该列所需要合并的行数; cellMerge
就是传给el-table
合并行或列的计算方法
如果还是没有看明白,那就直接运行demo
看看吧,demo猛戳这里!!!
(完)
如何让elemengUI中的表格组件相同内容的单元格自动合并的更多相关文章
- 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
- 使用VUE组件创建SpreadJS自定义单元格(二)
在上篇中,我们介绍了如何通过设置runtimeCompiler为true,在Vue中实现了动态创建电子表格组件.想了解具体内容可看点击查看使用VUE组件创建SpreadJS自定义单元格(一). 但是在 ...
- [Xcode 实际操作]五、使用表格-(5)设置UITableView的单元格背景颜色
目录:[Swift]Xcode实际操作 本文将演示单元格背景颜色的设置 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添加两个协 ...
- [Xcode 实际操作]五、使用表格-(11)调整UITableView的单元格顺序
目录:[Swift]Xcode实际操作 本文将演示如何调整单元格在表格中的位置. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先 ...
- phpspreadsheet 中文文档(一) 访问单元格
2019年10月11日11:45:09 访问单元格 访问电子表格中的单元格应该非常简单.本主题列出了一些访问单元的选项. 通过坐标设置单元格值 可以使用工作表的setCellValue()方法来按坐标 ...
- 使用VUE组件创建SpreadJS自定义单元格(一)
作为近五年都冲在热门框架排行榜首的Vue,大家一定会学到的一部分就是组件的使用.前端开发的模块化,可以让代码逻辑更加简单清晰,项目的扩展性大大加强.对于Vue而言,模块化的体现集中在组件之上,以组件为 ...
- jQuery实现HTML表格单元格的合并功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- EXCEL中,如何引用一个单元格中的数据,作为另一个单元格内容中的一部分?
https://zhidao.baidu.com/question/230715654.html 假设单元格A1值是8(该值由函数计算得出),我要在单元格B1中引用A1的值,但只是作为B1单元格内容中 ...
- excel用函数去掉单元格内容中的括号,并只保留单元格里面的内容
1.substitute(需要执行替换操作的单元格,需要替换的字符,替换后的字符,有多个需要替换的字符可以指定替换的第几个) 例如:aab--substitute("aab",&q ...
随机推荐
- ant path匹配原则
ant path匹配原则 又称路径匹配原则,spring中的相关策略类org.springframework.util.AntPathMatcher 路径模式使用了apache ant的路径样式 ap ...
- 从零开始的 phpstorm+wamp 组合下的debug环境搭建(纯小白向)
本文主要是为了帮自己记住每次重装系统后需要干点啥,如果能帮到你,烦请给个好评 环境说明: 1. windows10 64bit 2. wampservers 3.0.6(x86) apache2.4. ...
- 使用foreach语句对数组成员进行遍历
/*** 使用foreach语句对数组成员进行遍历* **/ public class ForeachDemo { public static void main(String[] args) { i ...
- markdown下载、安装、破解、汉化与常用语法
markdown是一种纯文本格式的标记语言.通过简单的标记语法,它可以使普通文本内容具有一定的格式. 一.markdown下载 markdown破解版下载地址: http://www.pc6.com/ ...
- CS184.1X 计算机图形学导论 作业0
1.框架下载 在网站上下载了VS2012版本的作业0的框架,由于我的电脑上的VS是2017版的,根据提示安装好C++的版本,并框架的解决方案 重定解决方案目标为2017版本. 点击运行,可以出来界面. ...
- Spring Boot 入门(七):集成 swagger2
本片文章是基于前一篇写的,<Spring Boot 入门(六):集成 treetable 和 zTree 实现树形图>,本篇主要介绍了spring boot集成swagger2.关于swa ...
- fullpage.js报如下错的解决办法
控制台报错:fullPage: Fullpage.js version 3 has changed its license to GPLv3 and it requires a `licenseKey ...
- java.lang.OutOfMemoryError GC overhead limit exceeded原因分析及解决方案
最近一个上线运行良好的项目出现用户无法登录或者执行某个操作时,有卡顿现象.查看了日志,出现了大量的java.lang.OutOfMemoryError: GC overhead limit excee ...
- redis之管道
Redis 的消息交互当我们使用客户端对 Redis 进行一次操作时,如下图所示,客户端将请求传送给服务器,服务器处理完毕后,再将响应回复给客户端.这要花费一个网络数据包来回的时间. 如果连续执行多条 ...
- office visio 2019 下载激活
安装 下载 office ed2k://|file|cn_office_professional_plus_2019_x86_x64_dvd_5e5be643.iso|3775004672|1E4FF ...