el-table合并单元格样式乱了

### 解决 Element UI `el-table` 单元格合并后样式错乱

对于 `el-table` 实现单元格合并后遇到的斑马纹和鼠标悬停样式错乱问题，解决方案涉及调整 CSS 和 JavaScript 方法来确保表格外观的一致性和功能性。

#### 斑马纹样式修复

为了修正斑马纹条纹在合并单元格后的显示错误，可以通过自定义 CSS 来覆盖默认设置。具体做法是在原有基础上增加额外的选择器以适应新的结构：

/* 自定义斑马纹 */
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

通过遍历数据源，在每一行添加特定类名用于区分奇偶行，并应用上述样式[^1]。

#### 鼠标悬停样式修复

针对 hover 效果不一致的问题，可以利用 Vue.js 提供的方法重写渲染逻辑，使得整个被合并区域响应用户的交互操作。主要思路是对目标列的数据项附加唯一标识符，再基于此构建更复杂的 DOM 结构或修改现有事件处理器的行为模式。

以下是具体的实现方式之一——扩展原生组件功能，创建一个新的方法 `_cellMouseEnterHandler` 处理鼠标的进入事件，该函数会检查当前单元格是否属于某个已知范围内的首个可见实例，如果是，则触发高亮整组关联记录的操作[^2]。

methods: {
    _cellMouseEnterHandler(row, column, cell, event){
        const {rowspan} = this.getRowSpanAndColSpan(row,column.property);
        if (rowspan>1){ // 如果存在跨多行的情况
            let startRow=row.$index;
            for(let i=startRow;i<startRow+rowspan;i++){
                document.querySelector(`tr:nth-child(${i+1}) td`).classList.add('highlight');
            }
        }else{
            cell.classList.add('highlight');
        }
    },
    getRowSpanAndColSpan(dataItem,key){
      /* ... 获取行列跨度的具体业务逻辑...*/
    }
},
mounted(){
     this.$refs.table.bodyWrapper.addEventListener('mouseenter',this._cellMouseEnterHandler.bind(this));
}

此外，还需注意移除时清除所有可能残留的状态标记以免影响后续体验。

以上措施能够有效改善因单元格合并而导致的各种视觉异常现象，提供更加流畅自然的用户体验。