SOURCE

var Main = {
      data() {
        return {
          tableData: []
        }
      },
      created() {
        this.getList()
      },
      methods: {
        spanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 1 || columnIndex === 2) {
            // 连续的数量
            let continuousNumber = this.getContinuousNumber(row, rowIndex)
            // 是否与上一个相同
            let isPrevSame = this.getPrevSame(row, rowIndex)
            if (continuousNumber >= 1) {
              // 连续数量大于等于1 的，向下合并 continuousNumber 个单元格
              // 如果当前 gradeCode 和上一条数据相同，不显示当前数据，则 colspan 和 rowspan 为0
              return {
                rowspan: isPrevSame ? 0 : continuousNumber,
                colspan: isPrevSame ? 0 : 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          }
        },
        // 获取与当前数据相邻且 gradeCode 相同的数据条数
        getContinuousNumber(row, rowIndex) {
          // 默认 number 为0
          let number = 0;
          let tableData = this.tableData || []
          // 从 rowIndex 开始往后循环，如果 gradeCode 和 row.gradeCode 相同，number++，否则跳出循环
          for(let i = rowIndex; i < tableData.length; i++) {
            if(tableData[i].gradeCode === row.gradeCode) {
              number++
            } else {
              break;
            }
          }
          return number
        },
        // 获取 gradeCode 是否与上一条数据相同
        getPrevSame(row, rowIndex) {
          if(rowIndex === 0) return false;
          let tableData = this.tableData || []
          return row.gradeCode === tableData[rowIndex - 1].gradeCode
        },
        getList() {
          let list = [
            {
              date: '2016-05-02',
              name: '王小虎',
              gradeName: '七年级',
              gradeCode: 7,
              total: 7,
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              gradeName: '七年级',
              gradeCode: 7,
              total: 7,
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
              date: '2016-05-02',
              name: '王小虎',
              gradeName: '八年级',
              gradeCode: 8,
              total: 8,
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              gradeName: '八年级',
              gradeCode: 8,
              total: 8,
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              gradeName: '八年级',
              gradeCode: 8,
              total: 8,
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              date: '2016-05-03',
              name: '王小虎',
              gradeName: '八年级',
              gradeCode: 8,
              total: 8,
              address: '上海市普陀区金沙江路 1516 弄'
            }, {
              date: '2016-05-03',
              name: '王小虎',
              gradeName: '九年级',
              gradeCode: 9,
              total: 9,
              address: '上海市普陀区金沙江路 1516 弄'
            }
          ];
          this.tableData = list;
        }
      }
    }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/index.js"></script>
<div id="app">
<template>
    <el-table
      :data="tableData"
      border
      :span-method="spanMethod"
      style="width: 100%">
      <el-table-column
        prop="index"
        label="index"
        width="180">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="gradeName"
        label="年級"
        width="180">
      </el-table-column>
      <el-table-column
        prop="total"
        label="总计"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
    </el-table>
  </template>
</div>

@import url("https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/theme-chalk/index.css");