vue + element-ui实现动态多级表头
时间:2022-05-11 13:02
效果图
暂无数据
实现思路:
首先表头,包含着两种,一级和二级表头。
for循环遍历tabHeader,如果list为空则是一级表头,只需要显示value即可。
如果list有数据,则需要再次遍历list。
接着是内容的数据,是按照每行的每一个格子都放到一个数组里面,每一行的数据又放到一个数组里。最终显示的时候只需要对应每个格子的rowIndex和columnIndex来设置tableData中的数据就OK。
发现二级表头的数据对应不上,需要给tabHeader做下处理,将tabHeader的表头数据从左到右依次排序,拿到数据源后,遍历,给value同级增加一个index字段,如果list不为空则index依次增加,最终根据这个index取tableData的值。