element表格封装2-多级表头、表头合并、行列合并

这次是对上次封装表格的一次升级，增加了多级表头，列合并功能。我将代码和参考文章放在最下面。上面就放一些可能有点重要的废话吧，主要是我的一些总结。可以看看也可以直接滑到下方代码。此次同样只是做个记录，给以后一个方便，因此我也不公开献丑了。如果您能看到，做个参考就行，请勿转载。

效果图： 

总结：

• 关于多级表头，由于代码主要集中在列的位置（尤其是需要递归），因此将表格列单独拿出来封装成了一个组件（MyColumn）。
• 效果图的第一列也是一个二级表头，此处难点是隐藏二级标题后（display:"none"），后一个二级标题会进行补位，因此表头行合并这里目前的解决方式是获取dom，直接设置rowSpan=2；而且目前此处是写死的，也不利于扩展，后续有可能的话会改进，目前有个大胆的想法就是列上设置自定义标签（v-*）不知道能不能实现。
• 行列合并且之后的hover样式就是搜集网上的资料进行了一下整合，这里我的问题是目前只能选择一项进行合并，不然hover后的样式会出问题。想看相关资料滑到最下方找参考文章。
• 表格的斑马纹也是拿到dom后添加的elemnt UI表格的斑马纹样式类名，注意：表格必须加上stripe属性。方法依赖，不加就没有斑马线。
• 新增了isMerge属性，不配置isMerge属性，普通表格可正常使用。
• for in循环会访问该对象的原型，应该用在非数组对象的遍历上，不建议使用该方法遍历数组。 给个善意的提醒吧，从表现上来看就是比for循环数组是多循环一次，然后你不慎用来循环数组的话，你的vue就会报错，错误可能还会比较。。。说不上的感觉

代码

父组件：

表格组件：

列组件：

参考文章：

vue+elementui table表格递归生成多级表头_tsw529的博客-CSDN博客_vue 多级表头

element表格列相同值自动合并单元格 多列_iscolor的博客-CSDN博客

elementui表格单元格合并及表头单元格合并以及表头斜线分隔_CH-EN.的博客-CSDN博客