合并单元格，详解

<template>
    <div>
        <el-table
            :data="tableData"
            :span-method="cellMerge"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
                prop="id"
                label="序号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="记录时间">
            </el-table-column>
            <el-table-column
                prop="amount1"
                label="摄入能量">
            </el-table-column>
            <el-table-column
                prop="amount2"
                label="食物类型">
            </el-table-column>
            <el-table-column
                prop="amount3"
                label="食品名称">
            </el-table-column>
            </el-table>
    </div>
</template>

<script>
import { log } from 'util';
  export default {
    data() {
      return {
        tableData: [{
          id: '1',
          name: '8点',
          amount1: '1200千卡',
          amount2: '早餐',
          amount3: "鸡蛋"
        }, {
          id: '2',
          name: '8点',
          amount1: '1200千卡',
          amount2: '早餐',
          amount3: "西瓜"
        }, {
          id: '3',
          name: '8点',
          amount1: '1200千卡',
          amount2: '早餐',
          amount3: "葡萄"
        }, {
          id: '4',
          name: '9点',
          amount1: '40千卡',
          amount2: '上午加餐',
          amount3: "牛奶"
        }, {
          id: '5',
          name: '10点',
          amount1: '60千卡',
          amount2: '午餐',
          amount3: "米饭"
        }, {
          id: '6',
          name: '11点',
          amount1: '70千卡',
          amount2: '下午加餐',
          amount3: "牛奶"
        }, {
          id: '7',
          name: '12点',
          amount1: '40千卡',
          amount2: '晚餐',
          amount3: "蔬菜"
        },{
          id: '8',
          name: '13点',
          amount1: '80千卡',
          amount2: '晚上加餐',
          amount3: "汤"
        }],
        spanArr: [],//存每一行的跨行数，有未知个数（就是有跨两行的，有跨三行的，或者不跨行）本demo是【3,0,0,1,1,1，1,1】
        pos: '',
      };
    },
    created(){
      this.getSpanArr(this.tableData)
    },
    methods: {
      getSpanArr(data) {
        // console.log(33,data);
        // 因为是循环调的，所以要把数组先清空
        this.spanArr=[];
        this.pos = 0;
        for (var i = 0; i < data.length; i++) {
        // i === 0 是第一行
          if (i === 0) {
            // 第一行前面没有行了，所以肯定要跨行的，至少跨一行，也就是自己独立占这一行，所以设置为1
            this.spanArr.push(1);
            this.pos = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i].amount2 === data[i - 1].amount2) {
              // 那个跨3行的，增加跨行数是在这叠加的，所以这个第一行默认设置了为1，
              // 那如果第二行的值跟第一行的相同，那么你会发现this.spanArr[this.pos] += 1;就把第一行的跨行数加一了
              this.spanArr[this.pos] += 1; //等同于 var a = a+1
              this.spanArr.push(0);
            } else {
              // 走到这时候，当前行的指定列跟上一行的此列不一样，所以不需要跨行，自己这一行是1
              this.spanArr.push(1);
              this.pos = i;
            }
          }
        }
      },
      cellMerge({ row, column, rowIndex, columnIndex }) {
        //需要合并的格子  columnIndex是坐标，1是指第二列
        if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row, //合并几行
            colspan: _col  //第几列
          }
        }
      }
    },
  };
</script>