在我們把資料進行合併後，單元格的hover樣式並未進行合併 ，滑鼠經過首行的時候，無法將具有合併的行進行全部高亮，度娘給出的方案都不太能通用，為有好的適應性 自己進行了封裝 。

在專案mixins資料夾下面建立hoverCss.js 將下面文件程式碼複製即可

/*
element table 合併時hover樣式優化
 使用方式：
    1.將 this.handleData('xxx')放入中元件mounted呼叫 例：
        mounted() {
            this.handleData('xxxx')    //呼叫 xxx傳入用於合併的欄位名
        },
    2.將以下配置寫入 <el-table> ：
        :row-class-name="rowClassName"
        @cell-mouse-enter="handleMouseEnter"
        @cell-mouse-leave="handleMouseLeave" 
    3.將hoverCss放入mixins目錄下，混入並使用hoverCss：
        import { hoverCss } from '@/mixins/hoverCss.js'
            export default {
            mixins: [hoverCss],
    
    * avue 函式非同步不同 需要將 this.handleData('xxx')放入getList中 例：
        getList(page, params) {
            fetchList().then(response => {
                this.handleData('xxxx')    //呼叫 xxx傳入用於合併的欄位名
            }).catch(() => {
            })
        },
        
 
*/
export const hoverCss = {
    data() {
        return {
            cellIndex: -1,
        }
    },
    created() {},
    methods: {
        // 處理資料, 給每一條資料加order
        handleData(tag) {
            let order = 1;
            let data = this.tableData;
            for (let i = 0; i < data.length; i++) {
                
 
if (i === 0) {
                    data[i].order = order;
                } else {
                    // 兩兩合併
                    // if (i % 2 === 0) {
                    //     data[i]['order']=order
                    // } else {
                    //     order+=1
                    //      data[i]['order']=order
                    
 
// }
                    
                    // 依據傳入欄位名動態合併
                    if (data[i][tag] === data[i - 1][tag]) {
                        data[i]['order'] = order
                    } else {
                        order += 1
                        data[i]['order'] = order
                    }
                }
            }

        },
        // 滑鼠進入單元格
        handleMouseEnter(row, column, cell, event) {
            let that = this
            this.tableData.forEach((item) => {
                if (row.order === item.order) {
                    this.cellIndex = row.order;
                }
            })
        },
        // 給相應的rowIndex新增類名
        rowClassName({
            row,
            rowIndex
        }) {
            // console.log(row, rowIndex);
            let r = -1;
            this.tableData.forEach((item) => {
                if (this.cellIndex === row.order) {
                    r = rowIndex;
                }
            });
            if (rowIndex === r) {
                return 'hover-row';
            }
        },
        // 滑鼠離開
        handleMouseLeave(row, column, cell, event) {
            this.cellIndex = -1;
        },

    }
    
}

　　合併效果