如何在某个元素hover的时候，行和列都加上背景颜色，并且本身就有颜色需要重叠加深（antd of vue 中的 table）

本文链接：https://blog.youkuaiyun.com/CSND7997/article/details/109027942

本文介绍如何在Vue项目中使用Ant Design表格组件，并通过自定义模板及事件监听实现单元格悬停时的列级背景色变化效果。文章详细解释了通过给单元格添加`ref`属性来跟踪DOM元素，并利用`mouseover`和`mouseleave`事件来更改背景颜色的具体实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

需求主要是方便用户可以看出自己鼠标悬停的时候，对准的行和列

这里明显可以看出，鼠标悬停在箭头方向的时候，横着的背景颜色加深（这里是antd中table表格中自己 ‘行’ 中的hover）代码如下.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td { background: #e6f7ff; }，但是因为也想让 ‘列’ 中也添加hover背景颜色
在vue中，通过给div加ref属性

<a-table
	<template
		<div
          ref="tableCell"
          @mouseover="mouseover(index)"
          @mouseleave="mouseleave"
        >
          <slot>
       		...
          </slot>
		</div>
	</template>
</a-table>

  mouseover(index) {
 	  // 鼠标进入的时候
      let difference = 7;  // 代表每行有多少列
      this.$refs.tableCell.forEach((table) => {
        if (table.offsetParent.cellIndex % difference === index) {  
        // offsetParent.cellIndex 则是table表格中的每个td的唯一标识索引，例如28个，则是从第一行第一个为1，按顺序
        // 当时我forEach的时候,直接用的用的是index,问题是，我的table表格会改变，但是根据vue的diff算法中，已存在的td索引值不会改变
          if (table.style.backgroundColor == "") {
          // 没有背景颜色  就加上一个className
            table.className = "addBgc";
          }else{
          // 原来有颜色，需要加深颜色，所以在父元素上添加bgc
            table.parentNode.style.backgroundColor = "rgb(230, 247, 255)"
          }
        }
      });
    },
    mouseleave() {
      // 鼠标离开的时候
      this.$refs.tableCell.forEach((table) => {
      	// 如果添加了颜色就需要清除
        if ((table.className = "addBgc")) {
          table.className = "removeBgc";
        }
        if (table.parentNode.style.backgroundColor) {
          table.parentNode.style.backgroundColor = ''
        }
      });
    },

<style lang="less">
.addBgc {
  background-color: rgb(230, 247, 255);
  transition: 0.5s;
}
.removeBgc {
  transition: 0.5s;
}

</style>