最終效果

單元格被合并，且鼠標(biāo)懸浮有變化

數(shù)據(jù)處理

需要對(duì)數(shù)據(jù)進(jìn)行處理，按照要合并的列排好序

合并行

合并原理，相鄰n行合相同元素并為一，則第一行列長(zhǎng)*n其他的不顯示即可，Element 提供了 span-method 用于合并行或列

1 首先計(jì)算相同元素的數(shù)量

// 我這里是按照 update_time 進(jìn)行合并的，相同時(shí)間合并為一行
let merge_update_time_index = 0;
this.table_data.forEach((item, index) => {
  if (index === 0) {
    // 第一行必須存在
    this.merge_update_time_list.push(1);
    merge_update_time_index = 0;
  } else {
    if (item.update_time === this.table_data[index - 1].update_time) {
      this.merge_update_time_list[merge_update_time_index]++;
      this.merge_update_time_list.push(0);
    } else {
      this.merge_update_time_list.push(1);
      merge_update_time_index = index;
    }
  }
});

2 span-method 合并

const all_merge_list = [0, 1, 2, 3]; // 全部合并的一級(jí)列
if (all_merge_list.includes(columnIndex)) {
  const col_num = this.merge_update_time_list[rowIndex];
  return {
    rowspan: col_num, // n行單元格的第一個(gè)直接占滿(mǎn)n行
    colspan: col_num > 0 ? 1 : 0
  };
}

懸浮樣式

單元格成功合并，但是發(fā)現(xiàn)鼠標(biāo)懸浮上去的時(shí)候樣式出了問(wèn)題，原因是合并后只是把第一行占滿(mǎn)了n行，其他行沒(méi)有了。解決方法是用 row-class-name 結(jié)合 cell-mouse-leave 和 cell-mouse-enter 解決，row-class-name 過(guò)濾要高亮樣式的數(shù)據(jù)，cell-mouse-leave、cell-mouse-enter 控制hover時(shí)哪些數(shù)據(jù)需要進(jìn)行樣式變換.

代碼比較簡(jiǎn)單

tableRowClassName({ row }) {
  return this.active_row_list.some(item => item.update_time === row.update_time) ? 'sucess_row' : '';
},
cellMouseEnter(row) {
  this.active_row_list = this.table_data.filter(item => item.update_time === row.update_time);
},
cellMouseLeave() {
  this.active_row_list = []
},

源碼

源碼

END