el-table 表头合并

效果如下,圈起来的是一个表头对应两列,这里是多级表头(本篇借鉴而来,如有需要请留言删除!)

 el-table 表头合并_第1张图片

 先说合并表头,主要用到header-cell-style方法

el-table 表头合并_第2张图片

 

这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效 我也是试了很多次才得出这个结论

合并表头代码思路是将两个列通过handerMethod隐藏第一列的同时,让第二列占据两个单元格的宽度来实现合并效果

以上是一个版本描述,下面是另外一个描述:

主要看handerMethod这个方法
rowIndex代表当前行号(行索引),columnIndex 代表当前列号(列索引)
比如说表头是第一行,行号是0,表头第一行第一列,行号和列号都是0

rowspan规定单元格可占据的行数
colspan属性规定单元格可横跨的列数

理解这个之后,其实代码也就很好理解了,找到表头这一行要合并的两列,将第一列的colSpan设为2,代表单元格可以占据两列,将第二列隐藏
 


如上就是列头合并,接来下是内容合并,依据列中的值进行表格合并,也可以多条件多单元格合并

 





你可能感兴趣的:(前端,javascript,vue.js)