本文记录了在Vue.js项目中如何处理表格的合并行需求，特别是当相邻行公司名称相同时进行合并，并展示相同的斑马纹样式。通过引入公共文件中的合并行和设置斑马纹样式的方法，对获取的数据进行处理，利用TableAllMergeRows和SetMergeRowCloor函数实现功能。注意，渲染斑马纹样式的CSS应放在而非中，同时需关闭表格原有的斑马纹样式以避免冲突。
今天在实现公司项目的时候碰到了一个需要，要将页面表格显示的相连的相同公司名称进行合并，思考了很久，在同事的帮忙下实现了，在这边将其记录下来。
在公司项目的公共文件夹下面有一个已经定义好的合并行设置斑马纹显示样式的方法
（1）首先，将在公共文件下面定义好的两个处理合并行、设置合并行的斑马纹样式的方法如下引入到需要的页面中：
其中第一个用于处理是否有相同进行合并的、第二个则是配合第一个给其渲染上斑马纹样式。
（2）在公司项目渲染表格页面进行相关配置则是在获取数据对数据进行处理：
其中res：代表的就是接口获取到的数据。
因为处理是否有相同进行合并的TableAllMergeRows（）函数需要有两个参数：一个是获取到的要进行处理的数据data，一个是要判断是否合并行的关键keys，因此就在要渲染效果的页面中指定了如上的参数，关键keys是‘companyId’（当然后续自己需要啥给他给成啥就可以，还可以多个）,然后将获取到的res和定义好的keys传给TableAllMergeRows（），便可以准确得到合并行之后的数据。
这时候将得到合并行之后的数据data、设置变色的名称、判断合并的RowSpan--->
最低0.47元/天 解锁文章
682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
