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

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

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

一、表格样式展示

1. 表格代html码如下

<div class="tableMain">
      <el-table :data="tableData" :row-style="tableRowStyle" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180">
        </el-table-column>
        <el-table-column prop="name" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

样式代码部分

.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