.el-table.success-row{background:#f5f7fa;}Vue.js&Element-UI实现表格组件的行合并及鼠标悬停后合并后的样式优化({row,column,rowIndex,columnIndex})参数说明typespan-method组合行或列计算方法Function({row,column,rowIndex,columnIndex})cell-mouse-enter单元格悬停进入时触发Eventrow,column,cell,eventcell-mouse-leave当单元格悬停退出时触发。行、列、单元格、eventrow-class-name行的className的回调方法，也可以使用字符串为所有行设置一个固定的className。这里的Function({row,rowIndex})/String行合并方法根据数据的id是否相同进行合并，将id相同的数据对应的行号放入一个数组中，然后以id作为key和行号数组作为存储的值privateOrderIndexArr:{[key:string]:number[]}={};私人rowIndex='-1';私人hoverOrderArr:number[]=[];//封装表数据---按某列合并privategetDatalistCaculate(){constorderObj:{[key:string]:number[]}={};this.projectLists.forEach((element:ProjectManageModule.ProjectInfo,index:number)=>{constid=element.id||'';if(orderObj[id]){orderObj[id].push(index);}else{orderObj[id]=[];orderObj[id].push(index);}});this.OrderIndexArr=orderObj;}//合并单元格===0){//如果当前行与上一行id字段相同if(rowIndex>0&&row.id===this.projectLists[rowIndex-1].id){return{rowspan:0,colspan:0};}else{constid=row.id||'';constrows:number[]=this.OrderIndexArr[id];constlength=rows.length;返回{rowspan:长度,colspan:1};}}}解决鼠标悬停表格样式问题合并两行以上数据时，鼠标悬停，你会发现合并后的行并不是处于活动状态，而是读取后会处于活动状态一条线并悬停在上面，看起来很别扭。这里api的处理逻辑是通过鼠标进入事件判断当前行是否为合并行，如果是，就把合并行添加类名，然后添加背景色。//添加类名privaterowClassName({row,rowIndex}:{row:ProjectManageModule.ProjectInfo;rowIndex:number;}){constrows:number[]=this.hoverOrderArr;如果(rows.includes(rowIndex)){返回'成功行';}}//鼠标悬停行privatecellMouseEnter(row:any,column:any,cell:any,event:any){this.rowIndex=row.rowIndex+'';this.hoverOrderArr=[];for(constkeyinthis.OrderIndexArr){if(key===row.id){this.hoverOrderArr=this.OrderIndexArr[row.id];}}}privatecellMouseLeave(row:any,column:any,cell:any,event:any){this.rowIndex='-1';}.el-table.success-row{background:#f5f7fa;}如果觉得文章还不错可以关注我的博客
