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;
  }
}