1. 前言

这两天在工作中遇到这样一个需求:将某个Excel中的数据在页面上以表格形式展示出来,并且尽量保持数据层级与Excel中一致。在原始Excel文件中,对每一行相同的数据都进行了合并,使得数据比较有层次性,而在页面表格中,也需要将相同内容的单元格进行合并。博主手头的项目使用的UI框架是elemengUIelemengUI中的表格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中的表格组件相同内容的单元格自动合并的更多相关文章

  1. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  2. 使用VUE组件创建SpreadJS自定义单元格(二)

    在上篇中,我们介绍了如何通过设置runtimeCompiler为true,在Vue中实现了动态创建电子表格组件.想了解具体内容可看点击查看使用VUE组件创建SpreadJS自定义单元格(一). 但是在 ...

  3. [Xcode 实际操作]五、使用表格-(5)设置UITableView的单元格背景颜色

    目录:[Swift]Xcode实际操作 本文将演示单元格背景颜色的设置 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添加两个协 ...

  4. [Xcode 实际操作]五、使用表格-(11)调整UITableView的单元格顺序

    目录:[Swift]Xcode实际操作 本文将演示如何调整单元格在表格中的位置. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先 ...

  5. phpspreadsheet 中文文档(一) 访问单元格

    2019年10月11日11:45:09 访问单元格 访问电子表格中的单元格应该非常简单.本主题列出了一些访问单元的选项. 通过坐标设置单元格值 可以使用工作表的setCellValue()方法来按坐标 ...

  6. 使用VUE组件创建SpreadJS自定义单元格(一)

    作为近五年都冲在热门框架排行榜首的Vue,大家一定会学到的一部分就是组件的使用.前端开发的模块化,可以让代码逻辑更加简单清晰,项目的扩展性大大加强.对于Vue而言,模块化的体现集中在组件之上,以组件为 ...

  7. jQuery实现HTML表格单元格的合并功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. EXCEL中,如何引用一个单元格中的数据,作为另一个单元格内容中的一部分?

    https://zhidao.baidu.com/question/230715654.html 假设单元格A1值是8(该值由函数计算得出),我要在单元格B1中引用A1的值,但只是作为B1单元格内容中 ...

  9. excel用函数去掉单元格内容中的括号,并只保留单元格里面的内容

    1.substitute(需要执行替换操作的单元格,需要替换的字符,替换后的字符,有多个需要替换的字符可以指定替换的第几个) 例如:aab--substitute("aab",&q ...

随机推荐

  1. SpringBoot系列:Spring Boot使用模板引擎Thymeleaf

    一.Java模板引擎 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 在jav ...

  2. Linux学习资料网站汇总链接(持续更新ing)

    排名不分先后. 学海无涯苦作舟. 博客: 1.slmba:LINUX博客原创大牛 2.edsionte's TechBlog:Linuxer (他的友情链接中还有一堆Linuxer,被公司屏蔽进不去. ...

  3. RF读取excel

    pip install robotframework-ExcelLibrary (安装ExcelLibrary库) 关键字: Open Excel 打开excel Get Column Count 获 ...

  4. 浏览器渗透框架BeEF使用笔记(二)

    0x03 常用模块 1-信息收集 可以收集到例如 浏览器名称版本 浏览器用户版本 插件(包括Java,ActiveX,VBS,Flash……) 窗口大小 1)details面板收集 (2)插件收集信息 ...

  5. Echart:前端很好的数据图表展现工具+demo

    官网:  http://echarts.baidu.com/index.html 通过一个简单的小Demo介绍echart的使用:demo均亲测可以运行 demo1: 1.新建一个echarts.ht ...

  6. 初识AutoIt

    1.定义 AutoIt 目前最新是v3版本,这是一个使用类似BASIC脚本语言的免费软件,它设计用于Windows GUI(图形用户界面)中进行自动化操作.它利用模拟键盘按键,鼠标移动和窗口/控件的组 ...

  7. Python编程系列---装饰器执行的底层原理及流程

    代码中No.1  No.2 ...表示执行流程 """No.1 No.2 ...表示执行流程""" def set_func(func): ...

  8. 13.多级代理下Nginx透传真实IP

    1.基于代理(七层负载均衡)情况下 透传客户端的真实IP 环境: 10.0.0.5 proxy_node1 一级代理 10.0.0.6 proxy_node2 二级代理 10.0.0.7 proxy_ ...

  9. 移动端真机调试--weinre

    一.安装 首先确保你的电脑上有node环境,然后使用cnpm或npm 安装 windows下 npm install weinre -g --registry=https://registry.npm ...

  10. linux "No space left on device" 磁盘空间解决办法

    某年某月某日某时,某人在工作中设置crontab定时任务规则保存时,提示“No space left on device”,此时用df -h检查磁盘,发现还有剩余空间.请问是什么原因及如何排查?什么会 ...