作者:MC_炽焰 | 来源:互联网 | 2022-01-05 08:41
最近工作中遇到一个需求,是要做一个页面放张大表格用来显示数据项,纯粹为了view层操作方便,就用了vue做渲染。然而又被提出了一个需求,需要相邻的相同值的行数据项进行单元格合并,这就醉了。没办法,只能想办法解决,下面通过这篇文章来一起看看吧。
前言
由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的。因此这个方法对所有数据驱动的框架都有效,比如说Angular和React。
最后的实现效果是这样的:
实现思路
原本的正常表格的代码长这样:
{{ $index + 1 }} |
{{item.bsO_Name}} |
{{item.GathDt | time}} |
{{item.F1}} |
{{item.F2}} |
{{item.F4}} |
{{item.F3}} |
{{item.F5}} |
{{item.F6}} |
{{item.F7}} |
{{item.F8}} |
{{item.F9}} |
{{item.F10}} |
先拿正常的表格来做测试,原生的标签就有rowspan 属性支持单元格行合并,属性值指的是向下合并多少行,其实就相当于在本行中向下又添加了几个单元格。
因为,如果接下来的一行还会渲染的话就会被挤下去,因此,下面被合并的单元格要隐藏掉,通过display: none; css控制即可。
因此,每个标签需要带有两个属性值,rowspan 和display 来控制每一个单元格的合并行数和是否显示。
代码变成这样了
{{ $index + 1 }} |
{{item.bsO_Name}} |
{{item.GathDt | time}} |
{{item.F1}} |
{{item.F2}} |
{{item.F3}} |
{{item.F4}} |
{{item.F5}} |
{{item.F6}} |
{{item.F7 | time}} |
{{item.F8}} |
{{item.F9}} |
{{item.F10}} |
{{item.F11}} |
其中,这两个属性有一些特征:
要显示的单元格rowspan 为>1的值,记录接下来的行数
要显示的单元格display 为true
接下来不显示的单元格rowspan 为1且display 为false
只有一行数据的单元格rowspan 为1且display 为true
实际上就是设计一个算法,对于输入的表格数组,每个数据项添加两个属性,rowspan 和display ,并且计算出rowspan 的值为
本列中以下相同值的行数,以及依据rowspan 的值计算display 的值是否显示,最后将此改变后的数组输出。
解决示例代码
function combineCell(list) {
for (field in list[0]) {
var k = 0;
while (k
总结
代码实际上很短很简单,主要借助的是kmp的思想,定义一个指针k,开始指向第一个值,然后向下比较,以此对rowspan 和display 设置,
若遇到不相同的值则判断为跳出,进行下一个循环,通知指针k加上这个过程中运算的行数,进行跳转,然后比较下一个单元格的值,和kmp 的指针跳转判断相同字符串一样的原理。
通过combineCell() 这个函数就可以将网络请求回来的数据进行过滤,附加上相应的值后再对vue监视的数组进行赋值操作就可以了。
实际上此方法不仅适用于vue,数据驱动的框架都可以,包括Angular和React,要想实现表格合并,对请求回来的值过滤一下就OK。
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
推荐阅读
-
本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ...
[详细]
蜡笔小新 2023-12-14 14:37:52
-
在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ...
[详细]
蜡笔小新 2023-12-14 17:34:00
-
-
近年来,大数据成为互联网世界的新宠儿,被列入阿里巴巴、谷歌等公司的战略规划中,也在政府报告中频繁提及。据《大数据人才报告》显示,目前全国大数据人才仅46万,未来3-5年将出现高达150万的人才缺口。根据领英报告,数据剖析人才供应指数最低,且跳槽速度最快。中国商业结合会数据剖析专业委员会统计显示,未来中国基础性数据剖析人才缺口将高达1400万。目前BAT企业中,60%以上的招聘职位都是针对大数据人才的。 ...
[详细]
蜡笔小新 2023-12-14 16:25:20
-
本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ...
[详细]
蜡笔小新 2023-12-14 14:53:02
-
本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ...
[详细]
蜡笔小新 2023-12-14 14:29:36
-
本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ...
[详细]
蜡笔小新 2023-12-14 14:25:33
-
本文介绍了C#中生成随机数的三种方法,并分析了其中存在的问题。首先介绍了使用Random类生成随机数的默认方法,但在高并发情况下可能会出现重复的情况。接着通过循环生成了一系列随机数,进一步突显了这个问题。文章指出,随机数生成在任何编程语言中都是必备的功能,但Random类生成的随机数并不可靠。最后,提出了需要寻找其他可靠的随机数生成方法的建议。 ...
[详细]
蜡笔小新 2023-12-14 14:15:30
-
本文介绍了在qt学习中实现数据库注册用户的方法,包括登录按钮按下后出现注册页面、账号可用性判断、密码格式判断、邮箱格式判断等步骤。具体实现过程包括UI设计、数据库的创建和各个模块调用数据内容。 ...
[详细]
蜡笔小新 2023-12-14 13:29:32
-
“你永远都不知道明天和‘公司的意外’哪个先来。”疫情期间,这是我们最战战兢兢的心情。但是显然,有些人体会不了。这份行业数据,让笔者“柠檬” ...
[详细]
蜡笔小新 2023-12-14 12:23:22
-
一、GAN原理介绍学习GAN的第一篇论文当然由是IanGoodfellow于2014年发表的GenerativeAdversarialNetworks(论文下载链接arxiv:[h ...
[详细]
蜡笔小新 2023-12-14 11:39:45
-
本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ...
[详细]
蜡笔小新 2023-12-14 11:31:05
-
本文介绍了解决无线认证设置故障的方法和注意事项,包括检查无线路由器工作状态、关闭手机休眠状态下的网络设置、重启路由器、更改认证类型、恢复出厂设置和手机网络设置等。通过这些方法,可以解决无线认证设置可能出现的问题,确保无线网络正常连接和上网。同时,还提供了一些注意事项,以便用户在进行无线认证设置时能够正确操作。 ...
[详细]
蜡笔小新 2023-12-14 10:32:21
-
本文介绍了游戏开发中的人工智能技术,包括定性行为和非定性行为的分类。定性行为是指特定且可预测的行为,而非定性行为则具有一定程度的不确定性。其中,追逐算法是定性行为的具体实例。 ...
[详细]
蜡笔小新 2023-12-14 10:22:59
-
本文介绍了JavaScript设计模式之策略模式(Strategy Pattern)的定义和优势,策略模式可以避免代码中的多重判断条件,体现了开放-封闭原则。同时,策略模式的应用可以使系统的算法重复利用,避免复制粘贴。然而,策略模式也会增加策略类的数量,违反最少知识原则,需要了解各种策略类才能更好地应用于业务中。本文还以员工年终奖的计算为例,说明了策略模式的应用场景和实现方式。 ...
[详细]
蜡笔小新 2023-12-14 09:31:45
-
本文介绍了PhysioNet网站提供的生理信号处理工具箱WFDB Toolbox for Matlab的安装和使用方法。通过下载并添加到Matlab路径中或直接在Matlab中输入相关内容,即可完成安装。该工具箱提供了一系列函数,可以方便地处理生理信号数据。详细的安装和使用方法可以参考本文内容。 ...
[详细]
蜡笔小新 2023-12-13 20:46:48
-
|
|