Vue+Element-UI el-table表格根据指定条件动态合并行span-method

当涉及到展示复杂数据的表格时，Element UI 中的 el-table 是一个非常有用的组件。在某些情况下，可能需要对表格进行合并显示以提高可读性。
案例需求：页面中有个表格组件，其中包含了一些学生的姓名、年级、负责班级和科目成绩等信息。我们希望能够合并显示相同学生的信息，并且在第一列（姓名）和第二列（负责年级）中进行合并操作。

1.处理后端返回的数据为表格所需要的数据

后端根据业务返回的数据：

此时我们需要将classList里的数据拉平放入新数组里，并且需要给每一份数据第一个要合并的数据做个标识，标明要合并几行

 this.tableData = []
      res.data.forEach(item => {
   
        if (item.classList) {
   
          item.classList.forEach((item2, index) => {
   
            this.tableData.push({
   
              rowspan: index === 0 ? item.classList.length : null, // 需要合并的行数 只在合并首行也就是index==0时定义标识
              colspan: 1,
              ...item,
              ...item2
            })
          })
        }
      })

2.利用el-table的属性spanMethod去定义合并方法

1. el-table标签上定义span-method方法

  <el-table
    :data="tableData"
    :span-method="spanMethod">

2. methods里增加spanMethod方法

    spanMethod({
     row, column, rowIndex, columnIndex }) {
   
      if ([0, 1].includes(columnIndex)) {
   
        if (row.rowspan && row.rowspan > 0) {
   
          return {
   
            rowspan: row.rowspan, // 需要合并的行数
            colspan: 1
          }
        }