el-tree实现一条数据占两行展示

1、合并单元格

 

因为要求第一行必须有个合并行展示序号，最后一列合并行展示操作的要求，且详情信息展示在第二行。

所以只能使用这种方法。

思路：1、将详情字段复制出来生成第二条数据

2、 表格中的第二列展示详情字段，width设置为最低。

3、:span-method="arraySpanMethod"合并单元格

 

 单数行，将列从序号1一直合并到倒数第二列

双数行，将0（&最后一列）列的第一行与第二行合并；

 

4、修改第一列序号

5、修改第二行详情内容的样式，隐藏详情字段的表头，和其他被合并的字段

:cell-class-name="getCell"

:header-cell-class-name="getCell"

 

 

2、表格展开行功能