基于饿了么（elementUI）UI组件分组表格（合并单元格）实现Demo

针对表格在实际业务场景中的合并单元格实现方式，初步思考，组织按着班级分组展示学生，并对不同班级进行相关操作，比如群发短信等。

<template>
  <div>
    <el-main class="contailer">
      <el-table :data="tableData" :span-method="spanMethod">
          <el-table-column prop="classId" label="班级ID"></el-table-column>
          <el-table-column prop="className" label="班级名"></el-table-column>
          <el-table-column prop="stuId" label="学号"></el-table-column>
          <el-table-column prop="stuName" label="姓名"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <span @click="sendMsg(row.classId)">群发短信</span>
            </template></el-table-column>
        </el-table>
    </el-main>
  </div>
</template>
<script>

export default {
  data() {
    return {
      tableData:[  //班级学生信息mock数据，该数据假设已经按着班级信息进行排序
        {classId:'001',className:'一班',stuId:1001,stuName:'zhangsan001'},
        {classId:'001',className:'一班',stuId:1002,stuName:'zhangsan001'},
        {classId:'001',className:'一班',stuId:1003,stuName:'zhangsan001'},
        {classId:'002',className:'二班',stuId:1004,stuName:'zhangsan002'},
        {classId:'002',className:'二班',stuId:1005,stuName:'zhangsan002'},
        {classId:'003',className:'三班',stuId:1006,stuName:'zhangsan003'},
        {classId:'003',className:'三班',stuId:1007,stuName:'zhangsan003'},
        {classId:'003',className:'三班',stuId:1008,stuName:'zhangsan003'},
        {classId:'004',className:'四班',stuId:1009,stuName:'zhangsan004'},
      ]
    };
  },
  computed:{
    groupNum(){  //获取班级列表数组
      return new Set(this.tableData.map(o => o.className));
    }
  },
  methods:{
    classGroup(name){  //根据班级名称获取学生数量
      return this.tableData.filter(o => o.className == name).length;
    },
    classNameLen(name){  //根据班级名称获取该班级第一个学生在全量学生中的偏移位置
      const tmp = Array.from(this.groupNum);
      const index = tmp.indexOf(name);  //某班级在全班级中的偏移位置
      let len = 0;
      for (let i = 0;i < index;i++){
        len += this.classGroup(tmp[i]);
      }
      return len;
    },
    sendMsg(classId){
　　　　//do something
　　},
    spanMethod(data) {  //对于表格数据进行分组合并操作，UI组件回调函数
      const {row,column,rowIndex,columnIndex} = data;
      if (columnIndex < 2 || columnIndex > 3) {  //班级合并展示区
        const len = this.classGroup(row.className);
        const lenName = this.classNameLen(row.className);
        if (rowIndex === lenName) {   //某班级首位学生行
          return {
            rowspan:len,
            colspan:1
          }
        } else return {   //某班级非首位学生行
          rowspan: 0,
          colspan: 0
        };
      } else {  //学生信息展示区
       return {
          rowspan: 1,
          colspan: 1
        };
      }
    }
  }
};
</script