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

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

这里明显可以看出，鼠标悬停在箭头方向的时候，横着的背景颜色加深（这里是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>