element + table 每两行对比相同值列合并

在开始之前先要明确几个概念：
保持不变：{ rowspan: 1, colspan: 1 }
删除一个单元格：{ rowspan: 0, colspan: 0 }
合并一个单元格：{ rowspan: 2, colspan: 1 }

<template>
  <div>
    <el-table
        :data="tableData"
        :span-method="mergeSpanMethod"
        border
        :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
    >
      <el-table-column prop="School" label="学校" align="center" />
      <el-table-column prop="Chinese" label="语文" align="center" />
      <el-table-column prop="Math" label="数学" align="center" />
      <el-table-column prop="English" label="英语" align="center" />
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      tableData: [
        {
          School: "第1小学",
          Chinese: "180",
          Math: 0,
          English: "180"
        },
        {
          School: "第1小学",
          Chinese: 0,
          Math: 0,
          English: "180"
        },
        {
          School: "第2小学",
          Chinese: "290",
          Math: "200",
          English: "180"
        },
        {
          School: "第2小学",
          Chinese: "295",
          Math: "200",
          English: "280"
        },
        {
          School: "第3小学",
          Chinese: "398",
          Math: "385",
          English: "380"
        },
        {
          School: "第3小学",
          Grade: "2年级",
          Chinese: "398",
          Math: "100",
          English: "80"
        },
        {
          School: "第4小学",
          Grade: "3年级",
          Chinese: "91",
          Math: 0,
          English: "80"
        },
        {
          School: "第4小学",
          Grade: "3年级",
          Chinese: "91",
          Math: 0,
          English: "87"
        },
        {
          School: "第5小学",
          Grade: "3年级",
          Chinese: "79",
          Math: 0,
          English: "80"
        }
      ],
    };
  },
  props: {
    msg: String
  },
  mounted() {
  },
  methods: {
    mergeSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 如果某些列不需要合并， 在此排除
      if (columnIndex === 1) return {rowspan: 1, colspan: 1};
      // 两两对比 相同的列合并
      const num = 2;
      const times = Math.ceil(this.tableData.length / num);
      for (let k = 0 ; k < times; k++) {
        const one = k * num;
        const two = k * num + 1;
        if (rowIndex === one || rowIndex === two) {
          const currentValue = row[column.property];
          const arr = [this.tableData[one], this.tableData[two]];
          // 获取上一行相同列的值
          const preRow = arr[rowIndex - 1 - (k * num)];
          const preValue = preRow ? preRow[column.property] : null;

          // 如果当前值和上一行的值相同，则将当前单元格隐藏
          if (currentValue === preValue) {
            return { rowspan: 0, colspan: 0 };
          } else {
            let rowspan = 1;
            for (let i = (rowIndex - (k * num)) + 1; i < arr.length; i++) {
              const nextRow = arr[i];
              const nextValue = nextRow ? nextRow[column.property] : null;
              if (nextValue === currentValue) {
                rowspan++;
              } else {
                break;
              }
            }
            return { rowspan, colspan: 1 };
          }
        }
      }
      return {rowspan: 1, colspan: 1};
	  // 这下面是在解题时的思路，也是一步步的慢慢推导出来的
	  // 先写死数据一组组的对比，再从中找共性，如果上面看不懂，可以把上面注释，解开下面 就明白了
      // if (rowIndex === 0 || rowIndex === 1) {
      //   const currentValue = row[column.property];
      //   const arr = [this.tableData[0], this.tableData[1]];
      //   // 获取上一行相同列的值
      //   const preRow = arr[rowIndex - 1];
      //   const preValue = preRow ? preRow[column.property] : null;
      //
      //   // 如果当前值和上一行的值相同，则将当前单元格隐藏
      //   if (currentValue === preValue) {
      //     return { rowspan: 0, colspan: 0 };
      //   } else {
      //     let rowspan = 1;
      //     for (let i = rowIndex + 1; i < arr.length; i++) {
      //       const nextRow = arr[i];
      //       const nextValue = nextRow[column.property];
      //       if (nextValue === currentValue) {
      //         rowspan++;
      //       } else {
      //         break;
      //       }
      //     }
      //     return { rowspan, colspan: 1 };
      //   }
      // }
      // if (rowIndex === 2 || rowIndex === 3) {
      //   const currentValue = row[column.property];
      //   const arr = [this.tableData[2], this.tableData[3]];
      //
      //   const preRow = arr[rowIndex - 1 - 2];
      //   const preValue = preRow ? preRow[column.property] : null;
      //
      //   // 如果当前值和上一行的值相同，则将当前单元格隐藏
      //   if (currentValue === preValue) {
      //     return { rowspan: 0, colspan: 0 };
      //   } else {
      //     let rowspan = 1;
      //     for (let i = (rowIndex - 2) + 1; i < arr.length; i++) {
      //       const nextRow = arr[i];
      //       const nextValue = nextRow[column.property];
      //       if (nextValue === currentValue) {
      //         rowspan++;
      //       }
      //     }
      //     return { rowspan, colspan: 1 };
      //   }
      // }
      // if (rowIndex === 4 || rowIndex === 5) {
      //   const currentValue = row[column.property];
      //   const arr = [this.tableData[4], this.tableData[5]];
      //
      //   const preRow = arr[rowIndex - 1 - 4];
      //   const preValue = preRow ? preRow[column.property] : null;
      //
      //   // 如果当前值和上一行的值相同，则将当前单元格隐藏
      //   if (currentValue === preValue) {
      //     return { rowspan: 0, colspan: 0 };
      //   } else {
      //     let rowspan = 1;
      //     for (let i = (rowIndex - 4) + 1; i < arr.length; i++) {
      //       const nextRow = arr[i];
      //       const nextValue = nextRow[column.property];
      //       if (nextValue === currentValue) {
      //         rowspan++;
      //       }
      //     }
      //     return { rowspan, colspan: 1 };
      //   }
      // }
      // console.log('rowIndex', rowIndex);
      // return {rowspan: 1, colspan: 1}
    }
  }
}
</script>

如果需要所有的列都对比合并单元格可以看下面的文章
element + table 行列合并