基於餓了么（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