解决ElementUI的Table组件固定列,在屏幕刚好够表格显示时,会出现固定列显示不全的问题
来源:互联网 发布:电子期刊在线阅读软件 编辑:程序博客网 时间:2024/06/06 17:57
在使用ElementUI的Table组件中的固定列时,发现当表格刚好显示全,处于临界值状态时,固定列的高度(height)会于表格高度不一致,导致固定列显示不全,出现垂直滚动条。
如上图所示,现在表格下方是未出现水平滚动条的,处于表格宽度刚好够显示所有字段的临界值,固定列出现了高度变小的情况,导致显示不全。
上图为检查元素找到的固定列的DOM元素,固定列的DOM元素是独立于表格body的,所有在开发代码中,给该列设置任何class或style是无法添加在固定列这个DOM元素上的。从这个DOM元素可以看到style元素设置了width和height,这个元素是ElementUI生成表格时,生成的DOM元素,且设置了宽高。
从Chrome检查元素,修改height为100%时,可以看见固定列显示不全的问题就已解决。
所以,解决方案就放在设置这个固定列的height上了。
从DOM树上看到,table组件还有哈希值的。(vue的每个组件有一个对应的哈希值),而固定列上是没有哈希值的,所以固定列是不在我们编码的单个组件上的,而是把table看作一个子组件,而固定列就在table这个子组件上,直接通过class选择器修改子组件的css样式是没用的,要通过\deep\修饰。
最后,通过给table设置calss:table-fixed
再通过css选择器进行样式穿透
.table-fixed {
/deep/ .el-table__fixed-right {
height: 100% !important; //设置高优先,以覆盖内联样式
}
}
这样就解决了这个问题。
阅读全文
0 0
- 解决ElementUI的Table组件固定列,在屏幕刚好够表格显示时,会出现固定列显示不全的问题
- 固定表格table的某一列
- JQuery Datatables 使用固定列 固定表头的下方显示不全(横线不出来了)
- 设计表头固定并且列宽可调整的Table表格
- 关于bootstrap中table的表格固定列
- listview的最外层套在ScrollView时,如果listview刚好显示一屏幕,会出现无法下拉刷新
- latex 表格列宽度固定的情况下让文字居中显示
- table 固定列和行的实现
- 关于table固定列宽度的解决方案
- 固定表格的标题列(CSS)
- 固定表格的标题列_2(CSS)
- 固定表格的标题列(CSS)
- 在绘制界面时ScrollView显示不全超出屏幕的组件--解决
- ABAP屏幕开发 - TABLE CONTROL隐藏列和固定列的实现
- 如何让DIV在内容不固定的情况下宽度刚好显示完内容
- 解决jquery easyui-datagrid列过多且无数据时列显示不全的bug
- 利用jquery实现的表格冻结列(固定列)功能
- 固定GridView的列
- Android WebView简要介绍和学习计划
- 编程思想之多线程与多进程(1)——以操作系统的角度述说线程与进程
- 打开任意窗口之后,电脑下方任务栏无法显示,解决方法:
- Error: linker command failed with exit code 1 (use -v to see invocation)
- ImportError: libcaffe.so.1.0.0: cannot open shared object file: No such file or directory
- 解决ElementUI的Table组件固定列,在屏幕刚好够表格显示时,会出现固定列显示不全的问题
- 安迪-比尔定理已被打破?
- Unparseable date: "2017-11-01"异常解决
- lua学习(三)关系运算符
- zookeeper搭建
- c指针
- 服务器搭建solr
- 用python中的列表和字典实现名片管理系统
- Studio运行出现:This version of Android Studio is incompatible with the Gradle Plugin used. Try disablin