el-table渲染二级对象数组

1、序言

        项目地址如下：https://gitee.com/liu-wenxin/complexELTable.git        

        想要渲染这样的数据：

        el-table官网给的例子都是一级对象数组，如果想要渲染二级对象数组，直接

:table = tableData 这样el-table渲染是不成功的！我想过能否在中直接使用去获取scope.row.memberList，然后在遍历scope.row.memberList生成，然而这是不可行的， 必须在 标签里面使用，如下2、3、4是我的实现方式以及一些思考！

2、表格嵌套（不推荐）

        在中嵌套 ，然后通过插槽row.memberList方式去赋值给data，效果如图所示：

        优点：确实实现了渲染二级对象数组的效果

        缺点：如果二级对象数组很长，我想对比不同行的不同模块的数据就会不直观，比如：我想要比较高一工科、高二工科数据就不方便，还要反复上下滚动，不直观！

3、树形控件结合表格（不推荐）

        这种二级对象数组可以把下图的grade抽出来放在一个数组，将数组放在el-tree树形组件中，点击树形结构中的数据，将选中的数据在tableData中查询（也就是filter数组过滤），从而把memberList过滤出来，赋值到右侧的表格数组，从而实现类似索引查找功能！

        代码如下：

        优点：实现了效果

        缺点：不能对比、不直观！ 

4、多表头（推荐）

        我们可以像官网那样使用多表头来渲染二级对象数组，不过官网的多表头是写死的，

是el-table-column的多层嵌套，数据还是一级对象数组 

 

 

         

        这种情况下，我们要分析一下数据结构，哪部分是固定不变的，哪部分是变化的

        把固定的部分抽离出来：

// 二级表头名称映射
columnMap: {
                people: '人数',
                boy: '男',
                girl: '女'
           },
// 二级表头字段
columnList: ['people', 'boy', 'girl'],

// 一级表头
tyleList: ['文科', '理科'],

• 首先遍历typeList
• 其次遍历columnList
• 最后根据获取行数据，获取row.memberList

        最终效果：这样就非常直观清晰了，对比度很明显，便于数据分析了！

        代码如下：