效果图：下边的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<String, Object> 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 + "' ";
前端渲染：
<!-- listPeople是表格数据集合 ，columns是表头集合 -->
<el-table border :data="listPeople" style="width: 100%">
<div>
<el-table-column prop="user_name" label="名字" fixed align="center"></el-table-column>
</div>
<div v-for="(column,i) in columns" :key="i">
<el-table-column :prop="column.key" :label="column.keyName" align="center"></el-table-column>
</div>