vue+element-UI表格（Table）组件中鼠标（hover）悬停、悬浮时样式的修改

vue+Element-Ui表格（Table）组件中鼠标（hover）悬停、悬浮时样式的修改

element悬停本身的样式：

修改后的效果
颜色可以换成你自己需要的颜色，我写的这个颜色是真的难看，哈哈哈哈

scss中写法（不会影响其他页面中的表格样式）

<style lang="scss" scoped> 
//表格鼠标悬停的样式（背景颜色）
/deep/ {
  .el-table {
    tbody tr {
      &:hover {
        td {
          background-color: #2cce34;
        }
      }
    }
  }
}
//表格鼠标悬浮时的样式 （高亮）
/deep/ {
  .el-table--enable-row-hover {
    .el-table__body tr {
      &:hover {
        background: rgb(184, 224, 250);
        border: 1px solid #313463;
      }
    }
  }
}
</style>

css写法（会影响其他页面中的表格样式）,可以用一个div把表格包起来给个class名，然后应该就不会影响其他页面中的表格样式了

<style>
/* 表格鼠标悬浮时的样式（高亮） */
.el-table--enable-row-hover .el-table__body tr:hover {
  background: rgb(184, 224, 250);
  border: 1px solid #313463;
}
/*表格鼠标悬停的样式（背景颜色）*/
.el-table tbody tr:hover > td {
  background-color: #2cce34 !important;
}
</style>