您的位置:首页 > 博客中心 > 互联网 >

vue + element-ui实现动态多级表头

时间:2022-05-11 13:02

效果图

技术图片暂无数据

13 14 15 16 53

实现思路:

首先表头,包含着两种,一级和二级表头。

for循环遍历tabHeader,如果list为空则是一级表头,只需要显示value即可。

如果list有数据,则需要再次遍历list。

接着是内容的数据,是按照每行的每一个格子都放到一个数组里面,每一行的数据又放到一个数组里。最终显示的时候只需要对应每个格子的rowIndex和columnIndex来设置tableData中的数据就OK。

发现二级表头的数据对应不上,需要给tabHeader做下处理,将tabHeader的表头数据从左到右依次排序,拿到数据源后,遍历,给value同级增加一个index字段,如果list不为空则index依次增加,最终根据这个index取tableData的值。

本类排行

今日推荐

热门手游