Elment-Plus 组件el-table 高亮鼠标悬停单元格

先看一下效果图，鼠标悬停哪行，哪行的单元格颜色就会发生改变

代码实现

<template></template> 模板中

或者行内使用

<script setup lang="ts">

        let cellStyle = (row, column) => {

                  if (row.row != "") {                         可以根据row中的数据进行判断

                    return {

                      color: "#fff",

                      backgroundColor: "#606060",

                   };

             }

        };

</script>

虽然框架的表格很好用很方便，但是有一些烦人的甲方却不想要，table的悬停浮现效果，特别是，单独给单元格设置了背景颜色之后，这个hover状态会覆盖掉自定义的单元格的背景颜色。

解决方法：覆盖css样式

::v-deep .el-table tbody tr:hover > td {

  background-color: rgb(96, 96, 96) !important; //修改成自己想要的颜色即可

}

这种方法只适用于背景颜色统一的表格！