element-ui 实现行合并-亲测有效！

目标样式：

首先先来看下我们拿到的返回数据：

scheduleList: [
        {
          date: '第一天',
          journey: '报道',
          lecturer: '',
        },
        {
          date: '第二天',
          journey: '企业生产安全应急预案数字化推演及复盘',
          lecturer: '国家危化品应急救援基地--林俊',
        },
        {
          date: '第三天',
          journey: '火灾应急处置',
          lecturer: '国家危化品应急救援基地—张学军',
        },
        {
          date: '第三天',
          journey: '中毒窒息事故应急处置',
          lecturer: '中化岙山事故应急处置师资',
        },
        {
          date: '第四天',
          journey: '人员触电事故应急处置',
          lecturer: '中化岙山事故应急处置师资',
        },
        {
          date: '第四天',
          journey: '泄漏事故应急处置',
          lecturer: '中化岙山事故应急处置师资',
        },
        {
          date: '第四天',
          journey: '问题交流',
          lecturer: '中化岙山事故应急处置师资',
        },
        {
          date: '第五天',
          journey: '受限空间作业管理',
          lecturer: '中化岙山危险作业内训师',
        },
        {
          date: '第五天',
          journey: '高处作业管理',
          lecturer: '中化岙山危险作业内训师',
        },
        {
          date: '第五天',
          journey: '动火作业管理',
          lecturer: '中化岙山危险作业内训师',
        },
        {
          date: '第五天',
          journey: '临时用电作业管理',
          lecturer: '中化岙山危险作业内训师',
        },
        {
          date: '第五天',
          journey: '问题交流与讨论',
          lecturer: '中化岙山危险作业内训师',
        },
        {
          date: '第六天',
          journey: '回城',
          lecturer: '',
        },
      ],

      rowIndex: '-1',

      orderIndexArr: [],

      hoverOrderArr: [],

html代码结构：

 <el-table
    :data="scheduleList"
    :span-method="objectSpanMethod"
    @cell-mouse-leave="cellMouseLeave"
    @cell-mouse-enter="cellMouseEnter"
    :cell-class-name="tableRowClassName"
    border
 >
    <el-table-column prop="date" label="时间" width="120"></el-table-column>
    <el-table-column prop="journey" label="行程" width="600"></el-table-column>
    <el-table-column prop="lecturer" label="讲师"></el-table-column>
 </el-table>

js代码：

methods: {  
// 获取相同编号的数组
    getOrderNumber() {
      const orderObj = {};
      this.scheduleList.forEach((item, index) => {
        item.rowIndex = index;
        if (orderObj[item.date]) {
          orderObj[item.date].push(index);
        } else {
          orderObj[item.date] = [];
          orderObj[item.date].push(index);
        }
      });
      // 将数组长度大于1的值 存储到this.orderIndexArr（也就是需要合并的项）
      Object.keys(orderObj).forEach((key) => {
        if (orderObj[key].length > 1) {
          this.orderIndexArr.push(orderObj[key]);
        }
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 2) {
        for (let i = 0; i < this.orderIndexArr.length; i += 1) {
          let element = this.orderIndexArr[i];
          for (let j = 0; j < element.length; j += 1) {
            let item = element[j];
            if (rowIndex === item) {
              if (j === 0) {
                return {
                  rowspan: element.length,
                  colspan: 1,
                };
              }
              if (j !== 0) {
                return {
                  rowspan: 0,
                  colspan: 0,
                };
              }
            }
          }
        }
      }
    },
    tableRowClassName({ row, rowIndex }) {
      let arr = this.hoverOrderArr;
      for (let i = 0; i < arr.length; i += 1) {
        if (rowIndex === arr[i]) {
          return 'hovered-row';
        }
      }
    },
    cellMouseEnter(row, column, cell, event) {
      this.rowIndex = row.rowIndex;
      this.hoverOrderArr = [];
      this.orderIndexArr.forEach((element) => {
        if (element.indexOf(this.rowIndex) >= 0) {
          this.hoverOrderArr = element;
        }
      });
    },
    cellMouseLeave(row, column, cell, event) {
      this.rowIndex = '-1';
      this.hoverOrderArr = [];
    }
}
mounted() {
    this.getOrderNumber();
},

css部分：

.el-table {
  /deep/ .hovered-row {
    background: #f5f7fa;
  }
}