【学习总结】关于vue中table表头加粗与遮挡问题

遇到的问题

我想实现的效果

但是我实际出现的效果

仔细观察，发现存在以下问题：

1.表头的背景与遮挡
2.加上边界

在项目中找到了对应的界面代码，发现特别简单，根本不存在实现这个效果的代码，于是找到了其导入的文件
界面的代码

很明显不存在我想要实现的效果的代码，于是找进了导入的文件oj-table
但翻看了几次代码依旧不知道如何实现的，就开始搜集去找相关资料。

解决方法

问题一(表头的背景与遮挡):
首先，我先去找如何是table表头的标题加粗找到了css代码

font-weight:bold;

于是我尝试在style中加入该串代码，但结果依旧无法使用
此路不通
接着尝试，想到了html中的th，尝试一番下来，并没有element组件中的table组件美观，并且与其他组件主题不一致，于是弃用。
此路还是不通

于是向前端的学姐求助，一番操作下来，才发现在oj-table.vue这个文件中还有一串代码被我忽视了……

有点粗心，没有看见……也没有注意到下面的。（不过，这也告诉我写代码格式要工整，尽量做到没每行都是一句单独的话，实现独立的功能）

解决方法：

在el-table标签中 插入
<el-table :border="border1" :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange" :header-cell-style="{background:'#eee',color:'#606266'}">

问题二(加上边界):

通过查找element组件中的组件，知道直接加上border即可实现

详细解释

 <el-table
                  :data="tableData"
                  border
                  stripe
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                  :header-cell-style="
                  {
                  		background:'#eee',
                  		color:'#606266'
                  }"
              >
                 

border:实现边框效果
border:实现斑马纹效果

@selection-change="handleSelectionChange"
一个选中就触发的方法；用来获取每选中的数据集对象；

获取之后对头部的每个小框框的style进行修改
:header-cell-style="
{
background:’#eee’,
color:’#606266’
}"
修改背景颜色为#eee（灰色）

而且这串代码还能实现遮挡border！！！