这篇文章主要介绍了Element实现表格嵌套、多个表格共用一个表头的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、分析需求
这里先上一张图说明 需求 ：
根据后端返回的数据 （ res 是一个数组，它的元素是一个对象，对象里面的 ext 属性是一个对象，它又包含了， default 、 free 和 pay 三个属性，且这三个都是数组格式。）：
渲染出一个这样子的 表格：
res 数据：
res 的每一个元素的直接属性 name （即为邮费模板名称，比如成都运费模板），
res 的 ext 属性下的三个数组 default 、 free 、 pay ，每一个数组要大的一行（这一行中，第一列是运送到的地址的名字，这里定义的是 area 属性，但后端是未给到这个字段的，可自己处理数据添加该字段 ，这里就不细说了。） 这个 area 属性占据的这一列，在页面的展示效果 应该是多行合并的效果。
二、代码实现：
{{scope.row.name}} 修改删除 .layout{ .tab_header{ color:#333; padding:0 5px 0 5px; height:45px; line-height:45px; border:1px solid #eee;display:flex; justify-content: space-between; background:rgb(233, 225, 225); } .operate{ span{ font-size: 14px; margin-right: 20px; margin-right:20px; color:#409EFF; cursor: pointer; } } /* 处理多个表格共用一个表头时，表头处出现多余空行的问题 （label置空后还是占据空间问题） */ .tab-thead-style{ thead{ display: none; } } }
三、知识点总结：
为什么要采用这种方式解决（渲染）？
① . 项目用的UI组件是Element，它的Table表格组件，没有直接处理行的操作。
② . el-table，它是通过注入data对象数组，并在el-table-column 中用prop属性来对应对象中的键名来填入数据，从而渲染出渲染表格。其中el-table-column表示一个列，label属性来定义表格的列名，即对象的一个键名代表一列；
③ . 没想到更优的解决办法，O(∩_∩)O哈哈~
多个表格共用一个表头时，注意：
①. 需做判断，同时注意label的值。
②. 当el-table-column 的属性label无值的时候，还是会占用空间，故当前表格在页面上会出现一个代表表头的空行，需要手动更改（重写）Element表格的 thead样式
table表格嵌套的时候，注意：
① . Element的Table组件可 自定义列模板，主要是利用它实现表格嵌套部分，通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，更多用法参考官网。
②. Element的Table组件可 合并行或列 ，多行或多列共用一个数据时，可以合并行或列；通过给table传入span-method方法可以实现合并行或列，参考上述代码的 **objectSpanMethod**方法（该表格的第一列需要合并多行――合并渲染表格的data数组的长度那么多行） 或者官网。
以上就是Element实现表格嵌套、多个表格共用一个表头的方法的详细内容，更多请关注本站其它相关文章！
