el-table使用fixed后,最后一行显示不全;el-table设置fixed后,最后一行被遮挡。

解决代码:

.el-table {/deep/ .el-table__body-wrapper {overflow-x: scroll !important;//直接设置横轴内容滚动条 即可撑高高度 还不影响使用}
}

一、情景:给element的el-table设置fixed固定后,最后一行显示部分被遮挡。有的说是有时出现这个问题。但是官方文档使用方法却没有出现。

二、原因: 这个bug现象只会在 使用fixed且没有滚动条的情况下才会出现,这也就解释了官方案例为啥正常了。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、问题分析:
注意:解决方案3.1是如何找到问题和修改的,但是不推荐。 解决方案3.2更好更推荐使用。
原因:el-table下有个el-table_fixed盒子,就是el-table_fixed高度不够导致了遮挡。

解决方案3.1(不推荐做法):
优点:显示正常
缺点:导致此固定列下方的滚动条被遮挡,导致无法点击滚动。
在这里插入图片描述> 在这里插入图片描述
在这里插入图片描述
设置100%代码如下:

.el-table {/deep/ .el-table__fixed {height: 100% !important; //设置高优先,以覆盖内联样式  但是会遮挡滚动条}
}

解决方案3.2(推荐做法):直接给表格内容 .el-table__body-wrapper 设置横向滚动条。
优点:直接就撑高了el-table_fixed的高度,显示正常,而且有滚动条时候也可以正常滚动。
缺点:内容足够时候也会有滚动条部分。但是这都是小的细节了对吧。。。可以忽略
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下方是设置滚动条的代码↓↓↓↓↓↓↓↓↓↓↓↓↓

直接复制此一段代码即可。

.el-table {/deep/ .el-table__body-wrapper {overflow-x: scroll !important;//直接设置横轴内容滚动条 即可撑高高度 还不影响使用}
}

四、总结:
直接设置横向滚动条既可以!有效的话点个赞评论收藏一波,让更多朋友能看到吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403311.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

修改el-table滚动条样式

.el-table {// 滚动条的宽度/deep/ .el-table__body-wrapper::-webkit-scrollbar {width: 10px; // 横向滚动条height: 10px; // 纵向滚动条 必写}// 滚动条的滑块/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {background-color: #1fff;//颜色border-radius: 5px…

Mac OS 如何更改文件的默认打开方式

From: http://www.ipc.me/os-x-xiao-ji-qiao.html 和使用 Windows PC 一样,人们在 Mac 电脑中往往也需要用多种应用开启同一种文件。并且,由于环境、习惯以及个人喜好不同,用户常常会希望更改某种文件的默认打开方式…… 在 OS X 系统下&a…

el-table列宽自适应;el-table表格的列根据内容自动撑满;el-table内容换行问题;

原文链接 重点就一个方法 :width"flexColumnWidth(‘date’,tableData)" 第一个参数是这个列的字段 第二个参数是这个表格的数据 只需要给对应的列 el-table-column 标签加上此方法 即可做到此列自适应 其他的列想要自适应宽度 同样使用 :width 方法即可 此段代码可…

Android初级教程:Android中解析方式之pull解析

在安卓中有很多种解析方式。按照大方向有xml解析和json解析。而,细致的分,xml和json解析各有自己的很多解析方式。今天这一篇主要介绍xml解析中的pull解析。对于xml的解析方式,我之前在javaweb一些知识中有写过dom和dom4j等等解析方式。有兴趣…

vi 多窗口同步滚动--适用于人工文件比较

vi本身带有文件比较功能,这个就不多说了,有时我们需要同时查看两个非常类似的文件,但是却有少许区别的地方,当然用专业的文件比较工具自然是非常方便的。 这里我只想提一下,vi实现多窗口同步滚动的方法, 先用vi打开两个…

sqlserver 把SELECT结果集中一列的所有的值 用逗号隔开放进一个字段内

首先我们有一个表 查询结果如下: 现在我们想要把USER_NAME这一列的内容 放到一个字段里面去: 一行sql语句解决问题: SELECT STUFF(( SELECT , convert(VARCHAR, USER_NAME) FROM TE_USER FOR XML PATH()), 1, 1, ) AS UserName解释一下上面这条语句: 1,首先STUFF函数在上面的…

java-多线程-一道阿里面试题分析

2019独角兽企业重金招聘Python工程师标准>>> 传说这是阿里的一道面试题: 也传说发这道题出来的作者去了tmail。下面是关于题目的描述: 这段代码大多数情况下运行正常,但是某些情况下会出问题。什么时候会出现什么问题?如何修正&a…

简单话题:LED呼吸灯和串口LED指示灯

最近在串口发送引脚上接LED指示发送或者接收状态,但是需求是希望连续发送或者接收字符过程中LED闪烁,而不是保持在一个常量或者常灭的状态。首先,把实际电路图和串口时序贴出来: 可以看出串口发送接收空闲态为高电平,只要进行数据…

mac下使用sshpass实现ssh记住密码

From: http://tinyhema.iteye.com/blog/2093795 由于有一些场景不能使用ssh私钥来实现免登,因此需要想其它办法解决一下这个问题。 安装sshpass 试图使用homebrew安装 Shell代码 $ brew install sshpass Error: No available formula for sshpass We wont …

ESXI忘记密码怎么办?

忘记ESX root用户的密码怎么办? 以单用户模式进入COS,然后修改root密码,既可搞定。第1步:打开/重启ESX主机图1第2步:到GRUB菜单处 (图2) ,用键盘上下键,将光标放在“VMware ESX 4.0”上,按“a”…

TCPDUMP/LIBPCAP 1-由零开始

简介 TCPDUMP是强大的网络包分析器,可以在线或离线抓包,设置过滤条件等操作。 LIBPCAP是十分简洁易用的C/C网络流量抓包库;实际上TCPDUMP就是基于LIBPCAP实现的一个应用程序。为什么要学会工具和库的使用 工欲善其事必先利其器&#xff0c…

TCPDUMP/LIBPCAP 2-搭建环境

1. 实验平台   Linux 发行版本众多,考虑到大部分开发者的习惯,因此决定采用桌面版系统,具体为 CentOS-6.5-x86_64。系统内核版本为:2.6.32。尽管内核版本较低,但考虑到兼容性和稳定性,选择了此版本系统作…

使用jquery的blockui插件显示弹出层

使用jquery的blockui插件显示弹出层 Posted on 2011-04-14 16:34 孤独者 阅读(9975) 评论(0) 编辑 收藏 在做网站的开发过程中,可能需要使用弹出层,使用jquery的blockui插件可以很轻松的实现这个效果。blockui可以在你发送ajax请求的时候,显…

提升用户体验,你不得不知道的事儿——三种提醒框的微技巧

大家都知道无论是android开发还是其他的开发,用户的体验都是很重要的事儿,下面就android开发中的三种提醒方式,Toast,SnackBar,Dialog做一些细节上的处理,或许能让你的产品更有用户亲和力。 1)Toast Toast是一个轻量级…

el-table列宽设置百分比无效;el-table使用min-width设置百分比;el-table百分比设置无效;

废话不多说&#xff0c;直接给每个el-table-column&#xff0c;设置 width"auto" min-width"25%"即可。 总的百分比还是要等于100%哈。 点赞收藏吧 感谢 代码可以直接复制使用&#xff1a; <template><div style"width:1300px;">&…

VIM使用系统剪切板

在 Linux 终端模式下使用 vim 编辑器时发现经常需要在vim打开的文本文档进行复制粘贴&#xff0c;那么下面就跟着我的思路一步步往下走吧。 一、首先确认当前 vim 配置是不是支持系统剪切板&#xff0c;可以在终端模式下输入命令&#xff1a; vim --version | grep clipboard…

python操作Excel读写--使用xlrd

From: http://www.cnblogs.com/lhj588/archive/2012/01/06/2314181.html 一、安装xlrd模块 到python官网下载http://pypi.python.org/pypi/xlrd模块安装&#xff0c;前提是已经安装了python 环境。 也可以在命令行执行&#xff1a;easy_install xlrd (注意权限) 二、使用介绍…

el-table自动充满,且无滚动条;el-table某列的列宽自适应,其他列按比例分配。

情景一&#xff1a;例如首列按照内容自适应展开&#xff0c;其余列有各自的比例。这样设置&#xff0c;就不会出现滚动条。 注意点&#xff1a; 给需要自适应展开的列加 :width"flexColumnWidth"计算方法 就可以自适应展开需要给余下所有的列都设置 width“auto” mi…

DataGridView控件中显示图片及其注意事项 【z】

windows Forms编程里面有一个DataGridView控件&#xff0c;它不光是可以显示数据&#xff0c;可以显示按钮&#xff0c;复选框&#xff0c;甚至还可以显示图片。这些图片可以来自于数据库&#xff08;用二进制的方式存储的&#xff09;&#xff0c;也可以来自文件系统。下面是一…

在winform上内嵌入其它的程序

这段代码很有意义,用于把一个程序的界面嵌入到我们自己程序的某个指定窗体上. 比如在某个项目里,我需要把基恩士的激光扫描轮廓显示给客户看,但是激光的DLL中并没有这种功能提供. 于是我想先启动激光的官方程序用以显示轮廓, 然后再把这种显示界面嵌入到我自己程序的界面上指定…