合并单元格

http://events.jianshu.io/p/0fe736d20051
1、通过css样式实现

<template>
  <el-table>
      <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-table :data="tableData" border >
                  <el-table-column v-for="(item,index) in tableColumnList" :key="index" :lable="item.propname" :property="item.prop" :width="item.width" align="center">
                      <template slot-scope="scope" highlight-current-row >
                          <span>{{scope.row[scope.column.property]}}</span>
                      </template>
                  </el-table-column>
                  <el-table-column prop="course" label="课程" align="center">
                      <template>
                          <el-row v-for="(item,index) in list " :key="index">{{item.course}}</el-row>
                      </template>
                  </el-table-column>
                  <el-table-column prop="grade" label="成绩" align="center">
                      <template>
                          <el-row v-for="(item,index) in list " :key="index">{{item.grade}}</el-row>
                      </template>
                  </el-table-column>
                  <el-table-column prop="level" label="水平" align="center">
                      <template>
                          <el-row v-for="(item,index) in list " :key="index">{{item.level}}</el-row>
                      </template>
                  </el-table-column>
              </el-table>
          </el-col>
      </el-row>
  </el-table>
</template>

<script>
export default {
   data(){
       return{
           tableColumnList:[
               {prop:id,propname:'学号'},
               {prop:stuname,propname:'姓名'},
               {prop:sex,propname:'性别'},
           ],
           tableData:[
               {
                   id:'001',
                   stuname:'小红',
                   sex:'女',
                   list:[
                       {
                           course:'数学',
                           grade:'80',
                           level:'良好'
                       },
                       {
                           course:'语文',
                           grade:'60',
                           level:'良'
                       },
                       {
                           course:'英语',
                           grade:'90',
                           level:'优秀'
                       },
                   ]
               },
               {
                   id:'002',
                   stuname:'小明',
                   sex:'男',
                   list:[
                       {
                           course:'数学',
                           grade:'60',
                           level:'良'
                       },
                       {
                           course:'语文',
                           grade:'80',
                           level:'良好'
                       },
                       {
                           course:'英语',
                           grade:'80',
                           level:'良好'
                       },
                   ]
               }
           ]
       }
   } 
}
</script>

<style lang="scss" scoped>
/deep/.cell{
    padding:0;
    .el-row:nth-child(2){
        border-top: #dfe6ec solid 1px;
    }
}
</style>

2、:span-method=“objectSpanMethod”
elementUI中可通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。
1、getSpanArr(data)方法 data就是我们从后台拿到的数据，通常是一个数组；
2、spanArr是一个空的数组，用于存放每一行记录的合并数；
3、 pos是spanArr的索引。
如果是第一条记录（索引为0），向数组中加入１，并设置索引位置；
如果不是第一条记录，则判断它与前一条记录是否相等，
如果相等，则向spanArr中添入元素0，并将前一位元素＋１，表示合并行数＋１，
以此往复，得到所有行的合并数，0即表示该行不显示
链接：https://www.jianshu.com/p/6067708bd1ee

<template>
  <div style="padding:20px">
    <el-table :data="tableData6" :span-method="objectSpanMethod" border >
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="amount1" label="数值 1（元）"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      spanArr: [],//用于存放每一行记录的合并数
      pos:0,
      tableData6: [
        {
          id: "1",
          name: "王小虎",
          amount1: "234"
        },
        {
          id: "1",
          name: "王小虎",
          amount1: "165"
        },
        {
          id: "2",
          name: "王小虎",
          amount1: "324"
        },
        {
          id: "2",
          name: "王小虎",
          amount1: "621"
        },
        {
          id: "2",
          name: "王小虎",
          amount1: "539"
        }
      ]
    };
  },
  mounted: function() {
    this.getSpanArr(this.tableData6);
  },
  methods: {
    getSpanArr(data) {
        // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].id === data[i - 1].id) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
        console.log(this.spanArr);
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(`rowspan:${_row} colspan:${_col}`);
        return {
          // [0,0] 表示这一行不显示
          rowspan: _row,
          colspan: _col
        };
      }
    }
  }
};
</script>