element table合并时hover样式优化 ，自用封装

在我们把数据进行合并后，单元格的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;
        },

    }
    
}

　　 合并效果