一. 简介

刚入职的小白,公司目前采用的框架是 SpringBoot + Vue . 前段的UI控件是Iview。由于我们的公司Java开发是全栈的。所以前端的工作也交到了我们的手里。但是在项目开发的过程中遇到了一些问题。比如我们想要绘制出下面所示的一种表格页面。不仅需要实现单列的合并,还包括了第二列行的合并。Iview 的官方文档也并没有这种表格的展现及相应的属性。。
在这里插入图片描述
于是就开启了无限搜索模式,可惜效果甚微。当然,也想像大神们那样根据Iview的组件和自己的需求,设计一个table 组件。可能力十分有限。于是 退而求其次 ,尝试着用 原生 table表格进行实现。

二. 实现方法

用 table 表格 实现行合并 ,列合并还是相对简单点的。但那是对写死的数据。如果数据是动态加载的,并且设计到多列中的行合并。对我这种菜鸟来说还是很有难度的~~
幸好,找到了 一些关于 table 表格进行行合并的方法,在经过分析和测试。得到了目前所需要的初级版本(上图所示)。
代码如下所示:
在这里插入图片描述
如下为封装的测试数据:
在这里插入图片描述
目前也只能想到这种解决办法,也希望路过的大神们可以给点建议,如何用Iview组件或者更好的方法去实现这个 table 表格 双列的 行合并的问题。
特此提醒: 实现的这种方法主要是参考 别人的 一个 demo .给大家一个链接。[ 参考链接]

Logo

前往低代码交流专区

更多推荐