elementUI合并行跟列单元格后，解决鼠标移入移出没效果

 文章之用于自己项目记录。

版本一是自己项目在原有已合并号的情况下，新增效果

版本二是直接可以复制查看效果的一个小demo

版本一：如果你已经在项目里面写好了合并函数

第一步：在el-table添加leave、enter事件

// 鼠标移入单元格时触发的方法
        cellMouseEnter(row, column, cell, event) {
          this.sameRowArr.forEach((arr, i) =>{
            if (arr.indexOf(row.index) != -1) {
              this.curRowArr = arr;
            }
          })
        },
        // 鼠标移出单元格时触发的方法
        cellMouseLeave(row, column, cell, event) {
          // 清空高亮行的索引数组
          this.curRowArr = [];
        },

第二步：data里面添加数组变量

第三步：在表格数据tableData赋值的地放添加函数，我这里是在seach函数里面

第四步：添加query函数，计算高亮行数

query() {
            let self = this;
            let sameRowArr = [], sIdx = 0;
            self.tableData.forEach((item, index) => {
              // 添加索引属性
              item.index = index;
              //第一行
              if (index === 0 ) {
                sameRowArr.push([index]);
              } else {
                if (item.orgShortName  === self.tableData[index-1].orgShortName) {
                  sameRowArr[sIdx].push(index);
                } else {
                  sIdx = sIdx + 1;
                  sameRowArr.push([index]);
                }

              }
            })
            // 更新组件的 sameRowArr 属性
            self.sameRowArr = sameRowArr;
          },

第五步：在高亮行数里里面设置鼠标的样式，因为我这合并单元格后斑马线效果出不来，重写了一次

tabRowClassName({row,rowIndex}){
          // 合计  同口径合计  斑马线
          let overClass = '';
          let temArr = this.curRowArr;
          //遍历高亮行索引数组
          for (let i = 0; i < temArr.length; i++) {
            // 如果当前行索引在高亮行索引数组中
            if (rowIndex == temArr[i]) {
              // 返回自定义的高亮样式类
              overClass =  "row-class-mao";
            }
          }
            //warning_hang  blue_hang  两个是斑马线的样式类
          return row.classStripe ? `warning_hang ${overClass}`: `blue_hang ${overClass}`
        }

版本二：

<template>
  <div class="tableBody">
    <el-table
        :data="tableData"
        style="width: 100%"
        :span-method="mergeColumn"
        border
        :row-class-name="tableRowClassName"
        @cell-mouse-leave="cellMouseLeave"
        @cell-mouse-enter="cellMouseEnter"
        height="100%"
    >
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>
      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mergingRows: [],
      mergingPos: 0,
      sameRowArr: [],
      curRowArr: [],
      tableData: [
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987122",
          name: "小明",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987123",
          name: "王小虎",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "12987124",
          name: "王小虎",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987125",
          name: "王小虎",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987126",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987126",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987126",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
      ],
    };
  },
  created() {
    this.query();
  },
  methods: {
    query() {
      let self = this;
      // 遍历 tableData 中的所有数据行
      for (let i = 0; i < self.tableData.length; i++) {
        // 如果是第一行
        if (i === 0) {
          // 将第一行的合并行数设为 1
          self.mergingRows.push(1);
          self.mergingPos = 0;
        } else {
          // 如果当前行的 ID 与上一行相同
          if (self.tableData[i].id === self.tableData[i - 1].id) {
            // 当前行需要合并，增加合并行数
            self.mergingRows[self.mergingPos] += 1;
            // 新的一行开始时，记录当前的合并行数为 0
            self.mergingRows.push(0);
          } else {
            // 如果当前行的 ID 与上一行不同
            // 记录当前行的合并行数为 1
            self.mergingRows.push(1);
            // 更新合并行数的起始位置
            self.mergingPos = i;
          }
        }

        // 调用 color 方法更新 sameRowArr
        self.color();
      }
    },

    color() {
      // 初始化同一行数组
      let sameRowArr = [], sIdx = 0;
      // 遍历 tableData 中的所有数据行
      this.tableData.forEach((item, index) => {
        // 给每一项添加索引属性
        item.index = index;
        // 如果是第一行
        if (index === 0) {
          // 该行的索引加入同一行数组
          sameRowArr.push([index]);
        } else {
          // 如果当前行的 ID 与上一行相同
          if (item.id === this.tableData[index - 1].id) {
            // 将当前行的索引加入同一行数组的当前分组
            sameRowArr[sIdx].push(index);
          } else {
            // 如果 ID 不同，创建新的一组
            sIdx = sIdx + 1;
            sameRowArr.push([index]);
          }
        }
      });
      // 更新组件的 sameRowArr 属性
      this.sameRowArr = sameRowArr;
      console.log(this.sameRowArr, "<---this.sameRowArr")

    },
    // 合并行的方法
    mergeColumn({ row, column, rowIndex, columnIndex }) {
      // 如果列索引小于等于 0
      if (columnIndex <= 0) {
        // 获取当前行需要合并的行数
        const _row = this.mergingRows[rowIndex];
        // 如果需要合并的行数大于 0，则设置 colspan 为 1，否则为 0
        const _col = _row > 0 ? 1 : 0;
        // 返回合并行数和列数的设置
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    // 设置高亮行样式的方法
    tableRowClassName({ row, rowIndex }) {
      // 获取当前的高亮行索引数组
      let temArr = this.curRowArr;
      // console.log(temArr, "《-----");
      // 遍历高亮行索引数组
      for (let i = 0; i < temArr.length; i++) {
        // 如果当前行索引在高亮行索引数组中
        if (rowIndex == temArr[i]) {
          // 返回自定义的高亮样式类
          return "row-class";
        }
      }
    },
    // 鼠标移入单元格时触发的方法
    cellMouseEnter(row, column, cell, event) {
      // 遍历 sameRowArr 中的每一组索引
      this.sameRowArr.forEach((arr, i) => {
        // 如果当前行索引在某一组索引中
        if (arr.indexOf(row.index) != -1) {
          // 更新 curRowArr 为当前组的索引
          this.curRowArr = arr;
        }
      });
    },

    // 鼠标移出单元格时触发的方法
    cellMouseLeave(row, column, cell, event) {
      // 清空高亮行的索引数组
      this.curRowArr = [];
    },
  },
};
</script>
<style scoped lang="scss">
/deep/.row-class {
  background: #f5f7fa;
}
</style>