解决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 相关文章推荐
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 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使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
Java中final关键字详解
2015/08/10 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
js实现拖拽上传图片功能
2017/08/01 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
python获取多线程及子线程的返回值
2017/11/15 Python
Python绘制七段数码管实例代码
2017/12/20 Python
python实现支付宝转账接口
2019/05/07 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
python、Matlab求定积分的实现
2019/11/20 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
雪山饭庄的创业计划书范文
2014/01/18 职场文书
教师一帮一活动总结
2014/07/08 职场文书
公积金接收函格式
2015/01/30 职场文书
格林童话读书笔记
2015/06/30 职场文书
领导视察通讯稿
2015/07/18 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
学校标语口号大全
2015/12/26 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
Python破解极验滑动验证码详细步骤
2021/05/21 Python