Vue 修改el-table 背景颜色，鼠标移入时颜色变换

Vue 修改el-table 背景颜色，鼠标移入时颜色变换

该文章在搭建完Vue-cli环境同时实现el-table的展示。

如果想了解构建表格请访问我之前的文章：点击跳转

一、表格样式展示

1. 表格代html码如下

样式代码部分

.tableAll{width:900px;height: 300px;background-color: red;
 

tableAll 为el-table外层的Div（可自行设定）

这里我们会发现我们将div的颜色设置为红色，而el-table默认的背景颜色为白色的。所以下面我们要来修改他的背景颜色。

二、el-table背景颜色

这里我们需要设定2个样式

.el-table, .el-table__expanded-cell {background-color: transparent;
 }.el-table th, .el-table tr {background-color: transparent;
 }
 

transparent : 可以理解为将背景颜色设为透明（如果想设置其他颜色也是可以的）我们来看下效果图
 

这样el-table里背景颜色就更换成功了。

如果这样的话能够知足那是远远不够的，因为在我们做项目的时候 我们每个项目的整体色系是不同的，虽然

el-table已经很完美了 但是跟我们的实际需求还是差一小段，这样就需要我们来修改。

三、hover样式修改

现在有一个问题出现在我们面前，就是当我们鼠标移入每一行的时候，他们颜色的变换很可能不是我们想要的，如图。

如果想要修改hover的颜色需要修改下面的样式。

.el-table__body tr:hover > td{background-color:yellow !important;
 }
 

注：一定要在后面加上 ‘!impirtant’

效果图如下。
这样我们的效果就实现了。

文章参考：https://blog.csdn.net/xialonghua/article/details/100034098