给el-table合并后的分组表格边框添加明显样式

需 求:

一般要求分组都会进行表格合并,为了视觉上更直观。那需求就觉得这样边框线非常浅,数据多了就容易看岔劈,提出提亮合并后每组的边框线,为了能更直观区分组别。

给el-table合并后的分组表格边框添加明显样式_第1张图片效果图:

给el-table合并后的分组表格边框添加明显样式_第2张图片

 代 码:以下是全代码,复制运行即可出现上图效果





 下面咱描述下我的思路:

        首先我们根据需求可以判断这个边框肯定是和合并的组有关系,但是审查元素可以看到这个合并的组并不是在一个元素中的,那就排除了给这个合并组添加border。那思路转化一下,我们修改边框颜色都是通过cell,那我们给每组合并数据中第一行添加border-top不就可以实现视觉分割了。

        那想法有了,咱就看下怎么实现,可以优先看下组件提供的原生属性,然后cell-class-name这个可以给单元格设置className的回调函数则可以解决这个问题。我们给合并组里的第一行都添加判断标识。在cell-class-name里判断满足条件的添加border-top样式即可

PS:表格合并有各种不同的方法,我上面的仅仅是其中一种,不同的方法添加标识代码的位置都不同。但是万变不离其宗,我的思路是只要给每个合并组中第一个添加标志那就完成了主要步骤,cell-class-name的判断依旧是相同的。所有代码都是为思路逻辑服务的。

以上,over!欢迎讨论~

你可能感兴趣的:(vue.js,elementui,javascript,前端)