el-table如何实现跨行合并

需求：将表格的数据进行展示，但是展示的数据内有需要合并的项。

举例：

tableData:[
  {
    "grade":"一年级",
    "classes":[
       {
          "name":"一班",
           "members":30
       },
       {
          "name":"二班",
           "members":30
       }
     ]
   },
   {
    "grade":"二年级",
    "classes":[
       {
          "name":"一班",
           "members":30
       },
       {
          "name":"二班",
           "members":30
       }
     ]
   },
]

在这个数据中，需要展示的表格列有：年级，班级，学生人数 ，年级就有合并行的需求。

在el-table 提供一个 span-method，具体使用传入一个方法，方法内的参数是一个对象，包含行，列，行索引和列索引。

返回的值是一个数组，数组的第一个值是行合并范围和列合并范围，因为这里的需求是行合并。

那需要在第一列的位置上，如果判断需要合并的行的索引是第一个就计算出合并的行数，其他的行就需要隐藏掉。

所以需要对于tableData可以先做一下转换，让对象带上合并的行数。

let tmpTableData  = []
tableData.forEach(item => {
    item.classes.forEach((it,index) => {
       let object = {
          "grade":item.grade,
          "name":it.name,
          "members":it.members
       }
      if(index == 0){
         object.rowSpan = it.length; //这里判断如何是需要合并行的第一个，就计算出要合并多少行，其余的行就不卸载这个属性
      }
     })
})

接着定义:span-method的方法，getRowSpan

const getRowSpan = ({row,column,rowIndex,columnIndex}) => {
     if(columnIndex == 0){
         return row.rowSpan?[row.rowSpan,1]:[0,0];//意思就是如果携带了rowSpan属性，就返回合并的行数，如果不携带，就隐藏。
     }
}

然后在页面内使用这个方法

<el-table :data="tmpTableData" border :span-method="getRowSpan">
    <el-table-column label="年级" prop="grade" align="center" />
    <el-table-column label="班级" prop="name" align="center" />
     <el-table-column label="人数" prop="members" align="center" />
<el-table>

这样显示的数据就是合并行的。