遇到的问题

我想实现的效果

但是我实际出现的效果

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

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"borderstripestyle="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！！！

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

vue table表格中只有表头加竖线分割
table表格中只有表头加竖线分割给<el-table>加一个属性 : :header-cell-style="{'border-right':'1px solid #8888 ...
vue + iview Table表头中插入图片
vue + iview Table表头中插入图片开发中遇到一个问题,在表头中需要插入一个公式,不想再引入别的插件所以考虑用图片代替正常代码中这样引入图片前端可以正常显示: <img styl ...
layui数据表格自定义复选框表头_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
layui表头样式_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
layui设置表格表头字体_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
Vue中使用Openlayers加载Geoserver发布的TileWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用Openlayers加载Geoserver发布的ImageWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...

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

table表头的修改

遇到的问题

解决方法

详细解释

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

最新文章

热门文章