Element UI的table不同应用

目录

一、自定义表头

二、纵向表头(动态表头)

2.1、分别拿到表头和表头中日期对应的行数据

2.2、拿到每个日期对应的列数据

一、自定义表头

          
            
            
          

二、纵向表头(动态表头)

以课表考勤图为例:

Element UI的table不同应用_第1张图片

有两种格式的数据:

2.1、分别拿到表头和表头中该课节对应的行数据


            
            
            
              
            

tableOldData是表格上最终要渲染的数据源;visibleCalendar是返回的表头;dateTable是表头中的日期对应的全部数据。渲染的时候,根据visibleCalendar里的日期去找对应的值。

2.2、拿到每个日期对应的列数据


            
              
            
            
            
            

通过headers这个数组确定要组装的数据源otherDatas格式,这样出来的数据每一行就是表格的row了。

第二种格式数据参考博客:el-table 纵向垂直表头_el-table纵向表头_wh4834的博客-CSDN博客

你可能感兴趣的:(ui,vue.js,elementui)