解决elementUI 切换tab后 el_table 固定列下方多了一条线问题


Posted in Javascript onJuly 19, 2020

现象:

解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

解决方法 :

1.修改全局css

2.只修改局部css

.你的tableClass{
  /deep/ .el-table__fixed {
  height: 100% !important; //设置高优先,以覆盖内联样式
    }
   }

补充知识:解决ElementUI的Table组件固定列,在屏幕刚好够表格显示时,会出现固定列显示不全的问题

在使用ElementUI的Table组件中的固定列时,发现当表格刚好显示全,处于临界值状态时,固定列的高度(height)会于表格高度不一致,导致固定列显示不全,出现垂直滚动条。

解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

如上图所示,现在表格下方是未出现水平滚动条的,处于表格宽度刚好够显示所有字段的临界值,固定列出现了高度变小的情况,导致显示不全。

解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

上图为检查元素找到的固定列的DOM元素,固定列的DOM元素是独立于表格body的,所有在开发代码中,给该列设置任何class或style是无法添加在固定列这个DOM元素上的。从这个DOM元素可以看到style元素设置了width和height,这个元素是ElementUI生成表格时,生成的DOM元素,且设置了宽高。

解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

从Chrome检查元素,修改height为100%时,可以看见固定列显示不全的问题就已解决。

所以,解决方案就放在设置这个固定列的height上了。

解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

从DOM树上看到,table组件还有哈希值的。(vue的每个组件有一个对应的哈希值),而固定列上是没有哈希值的,所以固定列是不在我们编码的单个组件上的,而是把table看作一个子组件,而固定列就在table这个子组件上,直接通过class选择器修改子组件的css样式是没用的,要通过\deep\修饰。

最后,通过给table设置calss:table-fixed

再通过css选择器进行样式穿透

.table-fixed {
 /deep/ .el-table__fixed-right {
 height: 100% !important; //设置高优先,以覆盖内联样式
 }
}

这样就解决了这个问题。

以上这篇解决elementUI 切换tab后 el_table 固定列下方多了一条线问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
jQuery取id有.的值的方法
May 21 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
javascript每日必学之循环
Feb 19 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 #Javascript
解决vue中el-tab-pane切换的问题
Jul 19 #Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 #Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 #Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 #Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 #Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 #Javascript
You might like
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
基于header的一些常用指令详解
2013/06/06 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
如何实现JS函数的重载
2006/09/22 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
Python变量作用范围实例分析
2015/07/07 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
使用python实现个性化词云的方法
2017/06/16 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
Python如何对XML 解析
2020/06/28 Python
全球度假村:Club Med
2017/11/27 全球购物
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
仓库管理制度
2014/01/21 职场文书
员工入职担保书范文
2014/04/01 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书