最后的效果就是单元格合并了，鼠标悬停有变化。数据处理需要处理。必须根据要合并的列的顺序处理数据。合并行的原理是将相同的元素合并到一个相邻的n行中，那么第一行和第一列的长度*n其他的不显示，Element提供了合并行或列的span-方法1首先计算第相同的元素//我这里按照update_time合并，同时合并成一行letmerge_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跨度方法合并constall_merge_list=[0,1,2,3];//所有合并的一级列if(all_merge_list.includes(columnIndex)){constcol_num=this.merge_update_time_list[rowIndex];return{rowspan:col_num,//n行的第一个单元格直接占据n行colspan:col_num>0?1:0};}浮动样式的单元格合并成功，但是鼠标悬停时样式就out了问题是合并后只有第一行填充了n行，其他行都没有了。解决方案是使用row-class-name结合cell-mouse-leave和cell-mouse-enter来解决，row-class-name设置高亮样式的数据，cell-mouse-leave，cell-mouse-enter控制hover时需要给哪些数据设置样式。代码比较SimpletableRowClassName({row}){returnthis.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
