-
2020-08-06 12:34:16
vue实现表格合并
1. 场景
这两天一个项目,属于子需求吧,就是要做一个页面放个简单的banner下面是张大表格用来显示数据项,纯粹为了view层操作方便,就用了vue做渲染。
然而,对方最近又提出了一个恶心需求,需要相邻的相同值的行数据项进行单元格合并,这就醉了。由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的。因此这个方法对所有
数据驱动的框架都有效,比如说Angular和React。最后的实现效果是这样的:2. 思路
原本的正常表格的代码长这样:
<tr v-for="item in items"> <td width="3%">{{ $index + 1 }}</td> <td width="15%">{{item.bsO_Name}}</td> <td width="8%" :class="{'overtime': overtime(item.GathDt)}">{{item.GathDt | time}}</td> <td width="5%">{{item.F1}}</td> <td width="5%">{{item.F2}}</td> <td width="5%">{{item.F4}}</td> <td width="5%">{{item.F3}}</td> <td width="5%">{{item.F5}}</td> <td width="5%">{{item.F6}}</td> <td width="5%">{{item.F7}}</td> <td width="5%">{{item.F8}}</td> <td width="5%">{{item.F9}}</td> <td width="5%">{{item.F10}}</td> </tr>
先拿正常的表格来做测试,原生的
<td>
标签就有rowspan
属性支持单元格行合并,属性值指的是向下合并多少行,其实就相当于在本行中向下又添加了几个单元格。
因为,如果接下来的一行还会渲染的话就会被挤下去,因此,下面被合并的单元格要隐藏掉,通过display: none;
css控制即可。因此,每个
<td>
标签需要带有两个属性值,rowspan
和display
来控制每一个单元格的合并行数和是否显示。代码变成这样了<tr v-for="item in items"> <td width="3%">{{ $index + 1 }}</td> <td width="10%" :rowspan="item.bsO_Namespan" :class="{hidden: item.bsO_Namedis}">{{item.bsO_Name}}</td> <td width="8%" :rowspan="item.GathDtspan" :class="{hidden: item.GathDtdis}" :class="{overtime: overtime(item.GathDt)}">{{item.GathDt | time}}</td> <td width="5%" :rowspan="item.F1span" :class="{hidden: item.F1dis}">{{item.F1}}</td> <td width="5%" :rowspan="item.F2span" :class="{hidden: item.F2dis}">{{item.F2}}</td> <td width="5%" :rowspan="item.F3span" :class="{hidden: item.F3dis}">{{item.F3}}</td> <td width="5%" :rowspan="item.F4span" :class="{hidden: item.F4dis}">{{item.F4}}</td> <td width="5%" :rowspan="item.F5span" :class="{hidden: item.F5dis}">{{item.F5}}</td> <td width="10%" :rowspan="item.F6span" :class="{hidden: item.F6dis}">{{item.F6}}</td> <td width="8%" :rowspan="item.F7span" :class="{hidden: item.F7dis}" :class="{overtime: overtime(item.F7)}">{{item.F7 | time}}</td> <td width="5%" :rowspan="item.F8span" :class="{hidden: item.F8dis}">{{item.F8}}</td> <td width="5%" :rowspan="item.F9span" :class="{hidden: item.F9dis}">{{item.F9}}</td> <td width="5%" :rowspan="item.F10span" :class="{hidden: item.F10dis}">{{item.F10}}</td> <td width="5%" :rowspan="item.F11span" :class="{hidden: item.F11dis}">{{item.F11}}</td> </tr>
其中,这两个属性有一些特征:
-
要显示的单元格rowspan为>1的值,记录接下来的行数
-
要显示的单元格display为true
-
接下来不显示的单元格rowspan为1且display为false
-
只有一行数据的单元格rowspan为1且display为true
实际上就是设计一个算法,对于输入的表格数组,每个数据项添加两个属性,rowspan和display,并且计算出**rowspan的值为
本列中以下相同值的行数,以及依据rowspan的值计算display的值是否显示**,最后将此改变后的数组输出。3. show me code
function combineCell(list) { for (field in list[0]) { var k = 0; while (k < list.length) { list[k][field + 'span'] = 1; list[k][field + 'dis'] = false; for (var i = k + 1; i <= list.length - 1; i++) { if (list[k][field] == list[i][field] && list[k][field] != '') { list[k][field + 'span']++; list[k][field + 'dis'] = false; list[i][field + 'span'] = 1; list[i][field + 'dis'] = true; } else { break; } } k = i; } } return list; }
4. 总结
代码实际上很短很简单,主要借助的是kmp的思想,定义一个指针k,开始指向第一个值,然后向下比较,以此对rowspan和display设置,
若遇到不相同的值则判断为跳出,进行下一个循环,通知指针k加上这个过程中运算的行数,进行跳转,然后比较下一个单元格的值,和kmp的指针跳转判断相同字符串一样的原理。通过
combineCell()
这个函数就可以将网络请求回来的数据进行过滤,附加上相应的值后再对vue监视的数组进行赋值操作就可以了。
实际上此方法不仅适用于vue,数据驱动的框架都可以,包括Angular和React,要想实现表格合并,对请求回来的值过滤一下就OK。原文链接:原文 欢迎访问本人博客:House of Cards
更多相关内容 -
-
excle多表格合并
2019-03-16 11:55:46Excel2016多表格合并具体操作方法。合并统一表格的不同表单。 -
Python将多个excel表格合并为一个表格
2020-09-20 22:11:58主要为大家详细介绍了Python将多个excel表格合并为一个表格的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
vue实现表格合并功能
2021-01-18 15:40:28本文实例为大家分享了vue实现表格合并功能的具体代码,供大家参考,具体内容如下 1、背景 本身有vue进行渲染的数据表格,,但是出于整体考虑,需要对相同的列信息进行单元格合并。 由于使用的是vue,想到MVVM是要用... -
vue element实现表格合并行数据
2021-01-18 15:40:51本文实例为大家分享了vue element实现表格合并行数据的具体代码,供大家参考,具体内容如下 支持不分页的表格数据,分页的表格数据还有小bug xss=removed span-method=objectSpanMethod> 序号 prop=id ... -
excell表格合并工具-office表格合并工具-wps表格合并工具-表格合并代码及示例(python)
2022-04-14 15:06:11老师收到很多表格,由于表格的项目很多,手动复制合并很麻烦,通过表格合并工具,将众多表格的内容,合并到一个表格中去。合并后,表格的格式不变。此工具使用python代码编写,用户可以直接使用,或者自我完善其功能... -
PQ合并表格完整例子.zip
2021-09-02 17:08:11PQ合并表格完整例子.zip -
excel多表格合并怎么快速完成?
2021-10-21 20:13:47今天跟大家分享一下excel多表格合并怎么快速完成? 1.打开演示文件要求将这两个工作表合并到一起 2.首先我们点击如下图选项 3.点击【汇总拆分】 4.选择【合并多表】 5.设置表头...今天跟大家分享一下excel多表格合并怎么快速完成?
1.打开演示文件要求将这两个工作表合并到一起
2.首先我们点击如下图选项
3.点击【汇总拆分】
4.选择【合并多表】
5.设置表头行数为1
6.最后点击【确定】即可
7.完成效果如下图
-
Vue实现数据表格合并列rowspan效果
2020-12-29 13:20:57现实中会遇到很多需求,合并列,例如要显示一个名学生的各门课程成绩。 html实现 使用html实现是比较简单的,利用table标签的rowspan属性即可,代码如下: 姓名 课程数 课程名称 成绩 张三 ... -
vue通过数据过滤实现表格合并
2020-10-16 16:28:47主要为大家详细介绍了vue通过数据过滤实现表格合并,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
shell快速合并多个Excel表格.txt
2020-06-18 06:38:19办公的时候想要合并多个Excel表格,一个个来拷贝粘贴,如果文件很多就要花很多时间,前面试了很多种方法,先用office和Python,感觉还是有点麻烦,后面自己写了shell脚本。 -
element-ui表格合并span-method的实现方法
2021-01-19 20:14:03官网给我们提供了span-method的方法可以进行表格合并,有4个参数返回:row,column,rowIndex,columnIndex;row和column是表格的行和列,里面是当前行和列的值,也就是tableData里的值,rowIndex,columnIndex是当前行和列的... -
易语言高级表格合并列相同内容源码-易语言
2021-06-13 02:35:21易语言高级表格合并列相同内容源码 -
如何快速把多个excel表格合并成一个excel表
2021-02-01 03:15:31如何快速把多个excel表格合并成一个excel表呢?首先,我们需要把多个excel表都放在同一个文件夹里面,并在这个文件夹里面新建一个excel文件。用microsoft excel打开新建的excel表,并右键单击sheet1,或者按ALT+F11...如何快速把多个excel表格合并成一个excel表呢?
首先,我们需要把多个excel表都放在同一个文件夹里面,并在这个文件夹里面新建一个excel文件。
用microsoft excel打开新建的excel表,并右键单击sheet1,或者按ALT+F11,找到“查看代码”,单击进去。进去之后就看到了宏计算界面。
然后我们把下面这些宏计算的代码复制进去,然后找到工具栏上面的“运行”下的“运行子过程/用户窗体”,代码如下,如图所示:
Sub 合并当前目录下所有工作簿的全部工作表()
Dim MyPath, MyName, AWbName
Dim Wb As Workbook, WbN As String
Dim G As Long
Dim Num As Long
Dim BOX As String
Application.ScreenUpdating = False
MyPath = ActiveWorkbook.Path
MyName = Dir(MyPath & "\" & "*.xls")
AWbName = ActiveWorkbook.Name
Num = 0
Do While MyName ""
If MyName AWbName Then
Set Wb = Workbooks.Open(MyPath & "\" & MyName)
Num = Num + 1
With Workbooks(1).ActiveSheet
.Cells(.Range("B65536").End(xlUp).Row + 2, 1) = Left(MyName, Len(MyName) - 4)
For G = 1 To Sheets.Count
Wb.Sheets(G).UsedRange.Copy .Cells(.Range("B65536").End(xlUp).Row + 1, 1)
Next
WbN = WbN & Chr(13) & Wb.Name
Wb.Close False
End With
End If
MyName = Dir
Loop
Range("B1").Select
Application.ScreenUpdating = True
MsgBox "共合并了" & Num & "个工作薄下的全部工作表。如下:" & Chr(13) & WbN, vbInformation, "提示"
End Sub
点击运行,等待一会合并表格就完成了。
需要说明的是:B65536这个数值可以修改增加,根据内容多少,修改参数
对使用WPS的用户,可以选择WPS专业版,普通版没有VBA程序。
-
npoi实现excel中多个表格数据分别合并
2021-02-01 10:35:34npoi实现excel中多个表格数据分别合并,excel数据导入导出,项目源码 -
表格合并拆分_表格_excel_vb6excel表格合并汇总_
2021-10-02 06:40:43对excel文件及表格进行合并、查分、汇总等操作 -
Python实现合并excel表格的方法分析
2020-12-26 00:17:20将一个文件夹中的excel表格合并成我们想要的形式,主要要pandas中的concat()函数 思路 用os库将所需要处理的表格放到同一个列表中,然后遍历列表,依次把所有文件纵向连接起来。 最开始的第一种思路是先拿一个文件... -
MergeExcelTable:基于nodejs的excel表格合并工具
2021-05-19 15:01:54基于nodejs的excel表格合并工具 安装或升级 该工具是Nodejs命令行工具,安装方式如下(需全局安装) npm install -g excelmergetool 查看版本 excelmergetool --version 查看帮助 excelmergetool --help 卸载 npm ... -
elementUI table表格动态合并的示例代码
2020-10-17 00:09:08主要介绍了elementUI table表格动态合并的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
表格合并器 百思表格合并 v2.0.1
2020-10-15 01:58:28百思表格合并是一款可以批量合并在同一个文件夹下的所有Excel表格的软件(支持子文件夹),支持.xls和.xlsx两种类型的表格合并。软件主要功能为按行合并和按列合并。按行合并:1.合并 -
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2020-12-09 14:26:50之前写了一些关于element-ui表格合并的方法,不过用的数据都是确定的数据(死数据),但是很多时候我们的数据都是通过后台获得的,数据不稳定,这个时候使用表格合并就需要先处理一下数据,先看一下一种很常见的数据展示... -
bootstrap表格列合并
2017-10-17 12:23:56bootstrap表格列合并,将要合并的单元格每四列进行合并! -
百思表格合并(Excel表格合并软件)v2.0.1官方免费安装版
2019-08-05 01:03:53百思表格合并是一款非常好用的Excel表格合并软件,可以批量合并在同一个文件夹下的所有Excel表格的软件(支持子文件夹),支持.xls和.xlsx两种类型的表格合并。 百思表格合并软件功能介绍: 软件主要功能为按行合并... -
layui数据表格跨行自动合并的例子
2020-10-16 12:04:23今天小编就为大家分享一篇layui数据表格跨行自动合并的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
好用的EXCEL文件合并的小程序
2018-07-25 16:55:15好用的EXCEL文件合并的小程序,打开软件,选择excel文件,就可以自动合并 -
python 将多个表格合并成一个表格中的多个sheet
2020-04-02 09:06:52本篇介绍,把多个excel表分别写到一个表格对应的多个sheet里面,每个表的名称就是sheet的名字 import os import pandas as pd dir = './table_dir' # 获取目录下所有的表 origin_file_list = os.listdir(dir) print...本篇介绍,把多个excel表分别写到一个表格对应的多个sheet里面,每个表的名称就是sheet的名字
第一种方法:用pandas
import os import pandas as pd dir = './table_dir' # 获取目录下所有的表 origin_file_list = os.listdir(dir) print(origin_file_list) with pd.ExcelWriter('result.xls') as writer: # 循环遍历表格 for i in origin_file_list: # 拼接每个文件的路径 file_path = dir + '/' + i # 把表名赋予给对应的sheet sheet_name = i[:-4] df = pd.read_excel(file_path) #变相解决表格中第一行第一列为空的缺陷 string = "".join(list(str(i) for i in df.index)) # 判断如果索引都为数字,则不保留索引(根据自己代码调整) if string.isdigit(): df.to_excel(writer, sheet_name,index=False) else: df.to_excel(writer, sheet_name)
第二种方法:用openpyxl
import os import openpyxl dir = './table_dir' # 获取目录下所有的表 origin_file_list = os.listdir(dir) wb2 = openpyxl.Workbook() for file in origin_file_list: file_path = dir + '/' + file sheet_name = file.split('/')[-1].split('.')[0] print(sheet_name) old_wb = openpyxl.load_workbook(file_path ) old_sheet_name = old_wb.get_sheet_names()[0] old_ws = old_wb[old_sheet_name] ws2 = wb2.create_sheet(sheet_name) for row in old_ws.values: ws2.append(row) wb2.save('result.xls')
例如图:
-
jquery miniui 教程 表格控件 合并单元格应用
2020-12-12 18:06:21表格:合并单元格 参考示例:合并单元格 调用方法:margeCells。如下代码: 代码如下: grid.on(“load”, onLoad); function onLoad(e) { var grid = e.sender; var marges = [ { rowIndex: 1, columnIndex: 0, ...