vue Element ui 动态合并单元格

实现效果图：

json结构：

 <el-table :data="data"  border height="600" :span-method="objectSpanMethod">
              <el-table-column  :label="head" v-for="(head, key) in header" :key="head">
                  <template slot-scope="scope">
                    {{data[scope.$index][key]}}
                  </template>
              </el-table-column>
</el-table>

控制单元格合并需要span-method(官网)

export default {
  data() {
    return {
         data:[],
         spanArr:[],    
    };
  },
  methods: {
  getSpanArr(data) {
       console.log(data)　
          for (var i = 0; i < data.length; i++) {
            if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0
            } else {
              // 判断当前元素与上一个元素是否相同,因合并第一个所以[0]
            if (data[i][0] === data[i - 1][0]) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
            }
        }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
       if (columnIndex === 0) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
          }
      }
  },
  mounted() {
      
      this.getSpanArr(this.data);  
  }
    
}

-------

2018-12-26 

发现一个bug，如果需要手动再去生成表格，在时间中调用this.spanArr=[],把spanArr清空一下

参考：https://www.cnblogs.com/Evermenot/p/9057744.html