spring boot mybatis 前端框架 vue.js vue + Element Ui 中生成动态合并表格及后端数据说明及常见问题

一、首先按需求举个例子：

在利用vue的一些框架开发中（比如ruoyi），有时会遇见这样需要一对多对多显示的表格（如下图），按照相同项合并多余的行。看到这如果和你遇见的问题相似那就步入正题

二、前端的设计

动态合并表格

:data="tableData"

style="width: 100%"

:span-method="objectSpanMethod"

border

>

:prop="item.prop"

:label="item.label"

v-for="(item, index) in tableHeader"

:key="index"

>

讲解中不以具体某些数据举例，统一用tableDatap[]数据对象数组表示需要遍历的数据

到这里前端的开发就已经完成了，只要getSpanArr(data) 和objectSpanMethod({ column, rowIndex })方法正常无错的带入就不会有太大问题。

三、后端数据说明及常见问题

后端代码就正常编写Controller类，Service类，Mapper类

常见并经常忽略Bug的来了

数据库以下列形式表示时

前端会显示为：

原因就是前端合并单元格的方法中只合并连续相同的数据行 ，由于数据添加顺序、时间等因素不同的影响无法保证相同连续。

所以我们在查询数据库的时候需要运用SQL语句中的自定义排序查询，运用自定义排序就需要新建一个与之对应的数据字典。如下简单的一个表project_dict

在对应的mybatis配置文件Mapper.xml中写以下查询语句

select *

from sys_examine_project

inner join project_dict p on p.examine_project = sys_examine_project.examine_project

and sys_examine_project.examine_name = #{examineName}

order by p.id

其他and的条件因人而异但是这句连接数据字典的条件一定要有

inner join project_dict p on p.examine_project = sys_examine_project.examine_project

查询结果如下：

综上，就可以得到一个心怡的依靠动态数据合并单元格表格了

文章来源

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。