前台vue+elementui 后台java 实现动态（可扩展）表头

效果图：下边的table比上边的table多了一列

思路：前台其实很好实现，两个数组，一个是表头，一个是数据，分别循环就行了，后台把表头集合作为查询条件，然后拼接sql，就可以得到一一对应的结果了。

重点：我觉得重点其实是数据结构，重点是两张表，一张是主表，存放固定属性，一张是付表，主要寸的是表头结果数据。

还有表头的基础数据是单独一张表。

举个例子：做一个优秀员工的评选，评选标准有长得是否好看、吃的多少、头发长短。。。。。。，我把员工姓名这些一直不变的放到主表里面，然后把评选标准结果放到附表里面，为了支持动态扩展评价标准，附表其实寸的是数据，是一个列转行的问题

表结构如下：

主表a：

id,name

附表b：

id,type,value,pid

表头数据c：

id,type

模拟保存数据：表头数据里面存入5条数据，即5个评价标准，然后保存优先员工1的数据到表a和表b里面，这时候应该是表a，存入一条数据，而表b存入5条数据。

对应标的结果如下：

主表a：

id,name

111，优秀员工1

附表b：

id,        type,      value,  pid

222，团队协作，0，111

223，工作态度，0，111

224，工作绩效，0，111

225，管理绩效，1，111

226，考核天数，3，111

表头数据c：

id,type

333，团队协作

444，工作态度

555，工作绩效

666，管理绩效

777，考核天数

查询数据：查询数据的方法就是拼sql，两点需要注意：1：先查表c，获取有多少表头，2根据查询到的表头数据集合循环，利用case when 拼接sql ,这样select 出来的字段，就能和前台vue定义的集合是一对一的关系了。

上代码：

 

 

要是都看懂了，要啥代码

 

 

 

 

 

 

 

 

 

 

后台拼接sql关键代码：

//拼接查询条件，即动态表头
for (Map map : selectItems) {
	String key = (String) map.get("key");
	String keyName = (String) map.get("keyName");
	selectSql1 += " max(case when s.item_type = '" + keyName
		+ "' then s.item_score else  0 end ) as '" + key + "', ";
			
}
//查询数据
String sqlPeople1 = "SELECT  "
    + selectSql1
    + " m.* "
    + " FROM mark_project m "
    + " left join score_de s on m.id = s.pid "
    + " where 1=1 "
    + " and m.leader_id = '" + teamLeaderId + "' "
    + " and m.begin_time >= '" + beginWeekDate + "' "
    + " and m.end_time <= '" + endWeekDate + "' ";

前端渲染：