【element-ui】解决问题——el-table组件表格上多出一条横线

最新推荐文章于 2024-08-06 17:24:21 发布
最新推荐文章于 2024-08-06 17:24:21 发布
阅读量2.5k 收藏 1
点赞数 5
分类专栏： element-ui 文章标签： vue.js 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42866036/article/details/126443726
版权
在使用Element-UI的el-table组件时遇到问题，当添加多条数据后，表格上方会多出一条不美观的横线。为了解决这个问题，可以在App.vue全局样式中针对body.el-table::before设置z-index为inherit，从而继承父元素的z-index值，有效消除多余的横线，保持表格的整洁布局。
摘要由CSDN通过智能技术生成

测开也需懂的前端小知识

问题现象

在使用element-ui的el-table组件，添加多条数据时，表格上多出一条横线。 影响表格的美观。
在这里插入图片描述

解决方案：

在App.vue中增加如下样式：
将z-index属性元素堆叠顺序设置为inherit（规定应该从父元素继承z-index 属性的值）

body .el-table::before {
    z-index: inherit;
}
Carol的测试之路
关注
专栏目录
解决elementUI固定列后，下方多了一条横线的问题
qq_37635012的博客
02-18 968
【代码】解决elementUI固定列后，下方多了一条横线的问题。
解决el-table多出一条横线的问题
shiqifei的博客
06-14 942
此问题主要是伪元素导致，将伪元素隐藏，下面提供两种方式。
el-table 表格内容多一根线的解决办法
博哥的二进制世界
07-29 2687
如图所示，数据中多了一条横线 解决办法是 .el-table::before { z-index: inherit; }
element-ui中el-table表格中上下两行出现了白线
最新发布
weixin_55973411的博客
08-06 404
2.解决办法 less样式穿透。
element-ui里el-table表格操作列多横线怎么解决
2201_75705263的博客
08-26 1320
在vue中封装了element-ui表格，然后使用插槽，fixed定位等，导致样式出现了错乱。
el-table填充数据出现多余线条
TaoYuan
07-24 4769
添加z-index可以解决，注意添加位置与table同级 .el-table::before { z-index: inherit; }
【VUE+element ui 】el-table最后一行多出横线
Y_hhya的博客
10-19 1235
感觉是某处样式穿透到改页面了，但没找到代码片段，先把表格背景色设成透明，暂时解决。
Vue 53 ，表格el-table多出一条横线，怎么解决，Vue样式穿透（el-table表格下方多一条线的问题，Vue2样式穿透，Vue3样式穿透）
weixin_65793170的博客
06-21 2529
⭐最近在写表格的时候，发现的问题，表格多出一条横线，可以看出其它行，都是正常显示，只有第7行多出一条横线，找了好久，最后发现是el-table表格的伪元素，问题就出在这：​ 直接在样式里写入，样式穿透，请看
el-table底部莫名出现多的横线，解决办法
huang_jimei的博客
06-06 680
el-table底部莫名出现多的横线，解决办法。
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
10-15
首先，让我们分析问题的现象：在切换ElementUI的tab组件时，`el_table`的固定列下方出现了一条不应该存在的线条。这可能是由于样式冲突或者组件渲染时的某些特性造成的。解决此类问题通常需要对CSS样式有深入理解，...
vue element-ui表格的滚动条样式修改
weixin_43829905的博客
12-30 7575
vue element-ui表格的滚动条样式修改 默认element-ui table固定表头或列时，当表列过多出现滚动时，滚动条效果如下，效果不是很好看（个人感觉） 修改前效果： 修改后效果： 满意度加加 直接加全局代码样式修改就可以了 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 6px; /*滚动条宽度*/ height: 8px; /*滚动条高度*/ background-color: white;
Vue3 - Element Plus 标签页 Tabs 去掉底部灰色线条下划线，隐藏 el-tabs / el-tab-pane 选项卡下面一条很长的线条（完美去除 tab 标签页组件下方的灰线条）
王佳斌
08-11 7554
element plus 如何去掉el-tabs标签页下方很长的一条线，vue3 element plus 去掉el-tabs标签页底部黑色线，element-plus标签页下划线去除，去除element plus中tab组件中的下划线，清除vue3 elementplus标签页下划线，element plus去掉tabs选项卡底部黑色线，vue3 el-tabs去掉底部的下划线，el-tab-pane下面有灰色线条怎么清除掉，vue3 element plus如何去除tabs选项卡的灰色下划线，vue3标
element-ui table 表格内出现一根横线
w1753034677的博客
07-29 1377
element-uitable表格组件,在使用固定左侧列的时候,而且只有在数据只有一行的时候,经常会出现这种情况,底部出现一根横线,谷歌浏览器没问题,ie11浏览器是这个问题,记录一下。记住是加在全局样式上,不能加在含有scope的style上。element-uitable表格内出现一根横线。解决方法,设置全局样式,不要加在这个里面,不起作用。...
【Bug】el-table多出一条横线
lcukyNwa的博客
12-04 465
/ 隐藏伪元素（表格多出的横线）
elementUI table填充数据出现多余线条
only_neo的博客
07-18 5837
解决方法： body .el-table::before { z-index: inherit; }
elementui 修改 el_table 表格颜色，表格下方多了一条线问题
HDdgut的博客
10-23 1307
如果使用了scoped，需要加上stylus /deep/ (其他的css语言有不一样的写法)其他背景色，表格边框颜色修改。
el-table表格下方多一条线的问题
温柔咩咩的博客
09-22 3976
在el-table表格内容过多时滚动，表格下边框随着初始位置滚动问题，导致表格多出一条横线一条横线。
解决element-table表格最后一行出现一条横线的问题
m0_69722446的博客
08-04 510
【代码】解决element-table表格最后一行出现一条横线的问题。
解决 elementUI 切换table后 el_table 固定列下方多了一条线
weixin_55560445的博客
10-15 6093
问题： element-ui 在tab选项卡的页面点击tab切换后，表格中若存在某一列使用了fixed属性固定，会在固定列的底部出现一行横条，如下图所示： 解决方法： 1.修改全局css 2.只修改局部css .tableClass{ //table的class /deep/ .el-table__fixed { height...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值