el-table的底边框跑偏了。。。

林雨静 林雨静 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 400+累计阅读 410平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄10年
关注
原创 最新推荐文章于 2026-07-08 08:46:15 发布 410 阅读 AI 写同款· GEO 优化 ›
缩短饿了么tabs 组件线条宽度 css样式很多，相互之间配合起来其实能完成很不错的效果，也能减少很多JavaScript代码。因为对样式理解少从而造成的JavsScript脚本增多是得不偿失的。这么多方式都能达到你觉得做不到的效果，以上只是用elementUI的tabs组件做的例子，其他插件只需要用同样的方法去做，也能达到效果，很多时候，多多考虑样式之间的配搭，能极大提高你代码的稳定与码代码的效率。好了，上面分享就这么多，希望能帮到你哦httpshttpshttpshttpshttpshttps。... 阅读详情

详见：el-table的底边框问题
会出现这个问题的情况：给el-table加class，设置有height或者max-height属性。

收录于
element

当前文章被收录于：

element
3 篇文章 0 人学习
订阅专栏 查看详情
标签
#前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Element UI表格打印必看！动态fixed属性解决el-table打印错位全攻略 本文深入解析了Element UI中el-table组件因fixed属性导致的打印错位问题，并提供了从基础到企业级的完整解决方案。通过动态绑定fixed属性、自定义打印组件及优化打印样式，确保复杂表格在打印时布局精准无误，有效提升企业级报表的生成质量与用户体验。 阅读详情

相关推荐

【Qt】Qt5.15在线安装避坑指南：从代理配置到组件选择的完整实践

本文详细介绍了Qt5.15在线安装的全流程避坑指南，包括代理配置、组件选择和常见问题解决方案。通过使用Fiddler工具和国内镜像源，可显著提升下载速度。文章还提供了组件选择的黄金法则和安装后的验证步骤，帮助开发者高效完成Qt5.15的安装与配置。

weixin_42550052的博客 270

Element-ui中el-tabs的下划线样式微调

el-tabs下划线样式修改

qq_36546490的博客 2674

CANoe_Demo_下载以及安装教程

CANoe Demo下载安装流程

Jar_Lee的博客 1万+

el-tabs设置每个选项之间的间距且下划线对齐文字

当给选项卡设置间距时，此时下划线会有偏移的问题，也就是下划线和文字并没有对齐。 解决办法： 给el-tabs__item设置内边距 ::v-deep .el-tabs__item { padding-right: 40px; //此属性可使得激活的下划线和文字对齐 &.is-active{ color: #cf8e00; } } ...

qq_40576178的博客 6011

故障处理：Oracle一体机磁盘故障时磁盘组重平衡失败的故障处理

摘要： Oracle Exadata一体机出现磁盘故障案例，存储节点故障灯未亮但磁盘已产生大量坏块，导致重平衡失败。文章强调了一体机硬件巡检需检查6个关键维度：节点messages日志、存储cell告警日志、CellCLI日志、ASM告警日志、ILOM日志及服务器信号灯。故障分析显示硬盘物理故障导致磁盘组冗余受损，自动修复流程受阻。文中详细记录了通过CellCLI工具排查损坏磁盘的过程，并提供了完整的故障处理流程和命令输出。文章同步发布于微信公众号"IT民工的龙马人生"和博客网站(www

提供数据库技术支持(系统优化，故障处理，安装升级，数据恢复等） 1231

探索如何利用CST和ADS进行DDR的SIPI联合仿真

本文系统介绍了CST和ADS两款工具进行DDR信号完整性/电源完整性(SI/PI)联合仿真的方法。CST采用工作室协同方式，通过PCB布局导入、材料设置、模型分配等步骤，重点分析了电源阻抗优化和信号波形质量。ADS则利用SIPro、PIPro等专用工具，突出系统级验证和自动化优化功能。两者各有优势：CST擅长3D结构精确建模，ADS更适于快速系统验证。文章建议可根据项目需求混合使用两种工具，并提供了模型简化、频带选择等实用技巧。通过对比分析，为工程师选择仿真工具提供了决策参考。

一只豌豆象的博客 1150

解决【Element-ui的Tabs页签组件在TabPane按钮宽度发生变化后，底部active-bar定位不准确】

问题描述： 当切换按钮的语言后，由于文字数量发生改版，按钮宽度变化，被选中的按钮下方的指示线定位不准确 解决方案： 在组件中绑定ref: <el-tabs ref="tabs"></el-tabs> watch: { currentLang(){ resetTabActivePosition(this.$refs.tabs.$el) } }, method: { resetTabActivePosition($...

知之为知之，不知为不知 4358

2026年全国青少年信息素养大赛复赛真题（算法应用主题赛C++初中组：带解析）（7月4日试卷一）【文末附答案和解析】

2026年全国青少年信息素养大赛复赛真题（算法应用主题赛C++初中组：带解析）（7月4日试卷一）【文末附答案和解析】

王老师青少年编程 1737

el-tabs更改margin，造成el-tabs__active-bar错位问题

3.我这个tab-position是lift的，如果正常的把translateY改成translateX，offsetTop改成offsetLeft。offsetLeft：获取对象左侧与定位父级之间的距离。1.给el-tabs添加@tab-click和ref。offsetTop：获取对象上侧与定位父级之间的距离。2.currentEL拿到当前高亮的div。

m0_73700304的博客 1401

基于simulink 的不间断电源ups的项目实例

UPS系统的核心组件包括整流器、逆变器、电池管理系统和控制系统。- **Three-Phase Controlled Rectifier**：设置触发角为0度，用于控制整流器的输出电压。- **Three-Phase Inverter**：设置逆变器的输出频率为60Hz，用于将直流电转换为交流电。- **Control System**：编写MATLAB函数，用于监测市电状态并控制各模块的工作模式。- **Step**：设置阶跃时间，例如0.05秒，阶跃前后的值分别为0和1，用于模拟市电中断。

xiaoheshang_123的博客 711

构建自己的 Qt 插件系统

Qt 本身提供了插件相关的技术，但并没有提供一个通用的插件框架！倘若要开发一个较大的 GUI 应用程序，并希望使其可扩展，那么拥有这样一个插件框架无疑会带来很大的好处。

青春不老，奋斗不止！ 2万+

Element el-tab bug修复

这里写自定义目录标题解决Element el-tab首个tab不显示下划线问题 解决Element el-tab首个tab不显示下划线问题 loadData (val) { // 元素渲染完后进行操作 this.$nextTick(_ => { // 获取第一个tab元素 const tabFirstElement = document.getElementById('tab-0') // 获取高亮显示条 const activeBarElement

α 920

DTI-ALPS处理笔记

前段时间刚好学习了一下DTI-ALPS处理（diffusion tensor image analysis along the perivascular space ），记录一下，以便后续学习。ALPS是2017年发表在《Japanese Journal of Radiology》的一篇文章首次提出的 ()，主要用于无创评估脑内淋巴系统功能的衡量数值。C图和D图中的蓝色部分是投射纤维，绿色部分是联合纤维，红色部分是皮下纤维。

weixin_52073820的博客 4791

el-tabs样式调整 ，切换时，下划线不变形

【代码】【无标题】

qq_37187520的博客 1097

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox（带书签），MATLAB统计学习工具

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android：LinePhone3.2.7(最新版本)，官网地址：http://www.linphone.org/

el-tabs改变值时下划线错位问题

el-tabs改变值时下划线错位问题

anny_mei的博客 856

android 蓝牙通讯demo

android 下蓝牙通讯demo，实现了发现蓝牙，使能蓝牙，通过蓝牙发送消息。

vue 给element-ui中的el-tabs动态设置label属性

效果： 代码： <template> <div class="login"> <el-tabs v-model="activeName"> <el-tab-pane :label="'用户管理（'+name+')'" name="1">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="2">配置管理</el-tab-pane>

weixin_46419373的博客 4774

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章，有部分习题没有答案，全英文复分析阿尔福斯(Ahlfors) 第三版答案

Vue解决echart在element的tab切换时显示不正确或宽度自适应问题

原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化 原理：利用v-if属性,当切换至对应的tab时，设置其v-if的值为true即可，同时设置默认显示的tab <el-tabs type="border-card" v-model="echarts_tabItem"> <el...

weixin_44909962的博客 2616

fixed导致el-table表格错位或下划线

对于经常显示和隐藏el-table的情景下可能出现样式混乱，错位或者有下划线.el-table__fixed::before, .el-table__fixed-right::before。上图用了一个el-collapse>el-collapse-item>el-form>el-table。通过监听el-table的data,在data请求获取到数据的时候，执行doLayout。

qq_49378268的博客 906

解决el-tabs下滑线与上方文字不对齐问题

给el-tabs外层包个div,el-tabs给个loading，loading就是列表的数据。

weixin_42987138的博客 596

Element-UI的table使用tab页切换行展示行错位问题修复

Element-UI的table使用tag页切换行展示行错位问题修复 项目中的场景： 菜单内使用el-tabs组件然后分为汇总和详情两个tab，两个独自请求列表展示正常，当点击其他菜单再进行切回的时候详情tab页的序号和其他行展示错误 解决： 首先table是封装的组件，在封装组件中对组件中没有处理activated activated() { this.$refs.table && this.$refs.table.doLayout() } 其次在写tabs 的

socaicaicaicai的博客 2289

el-tabs更改.el-tabs__item的padding或者margin造成el-tabs__active-bar错位问题汇总

解决办法 <el-tabs v-model="activeName" @tab-click="handleClick" ref="tabs"> <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in listData" :key="index"></el-tab-pane> </el-tabs> 给el-tabs添加ref=“tabs”

weixin_43650690的博客 4821

解决嵌套的el-tabs默认下划线不显示的问题

解决嵌套的el-tabs默认下划线不显示的问题

m0_48627420的博客 2090

[element-ui] el-tabs的选中项的下划线不是最新的

【代码】[element-ui] el-tabs的选中项的下划线不是最新的。

qq_14993591的博客 438

elementUI表格table边框不对齐

最近在使用elementUI的表格的时候出现一个问题，表格我给的是百分百宽度，但是有几列的宽度是固定的，这样就会导致表格的边框错位。 当然了，表格边框的错位原因不止这一个，可能还有其他原因。说到底就是因为elementUI的表格组件使用了两个表格，这样再使用或者数据动态变化时就很容易出现问题，下面我给出两个建议供大家参考。 一、使用doLayout方法 这个方法是elementUI提供的，使用的方式是 this.$refs.xxx.doLayout() 这个方法我不是很了解，感兴趣的可以看看官方文档，不

qq_45279180的博客 4090

解决el-table表格边框不对齐错行

引起的原因：渲染完el-table后，对其进行宽度、高度的计算重新渲染 解决办法：在css里添加 body .el-table th.gutter { display: table-cell !important; } 因为多出用到table了，所以直接全局改了，可以在App.vue、index.html、或者你添加的任意全局css文件里改。 ...

qq_36656155的博客 2732

vant中tab标签栏下划线位置异常的解决方案

通过使用了vant2中的tab标签栏引入了vue项目，可以实现切换的效果，但在使用的过程中发现，标签栏的。我在渲染这个tab标签栏的组件使用了v-show的指令，导致了下划线位置出错的情况。在tab标签栏的tabs上有resize重绘这个方法，可以调用这个来解决这个问题。.如果项目中允许的话，可以将v-show改为v-if则可以解决这个问题。的情况，效果如下图所示，下划线位置和流行并没有对齐。在我的项目中我是用了第二种方法进行解决，效果如下。...

weixin_54217534的博客 4524
上一篇： JS经典小栗子
下一篇： 记录好文章
点赞 0
评论 0
书签 书签 0
林雨静
林雨静
博客等级 码龄10年 11粉丝 23原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值