解决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 相关文章推荐
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
动态加载js、css的实例代码
May 26 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 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
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
web打印小结
2017/01/11 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
学习python 之编写简单乘法运算题
2016/02/27 Python
python对excel文档去重及求和的实例
2018/04/18 Python
详解python中的json和字典dict
2018/06/22 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
百丽国际旗下购物网站:优购
2017/02/28 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
什么是makefile? 如何编写makefile?
2013/01/02 面试题
军训考核自我鉴定
2014/02/13 职场文书
中学教师师德承诺书
2014/05/23 职场文书
药店促销活动总结
2014/07/10 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
Golang解析JSON对象
2022/04/30 Golang
Python OpenGL基本配置方式
2022/05/20 Python