Vue 进阶(幺幺玖):element-ui table 组件适应性问题(横向滚动条)
一、前言
在前端项目开发过程中,解决适配性、兼容性问题是经常遇到且费事费力的苦差事,尤其是在开发Vue
项目,应用部署在IE
(尤其是 IE9)上的时候。
在进行动态展示(根据后台返回的表头、表数据展示)搜索结果时,会遇到搜索结果适配屏幕宽度或高度,但是却会出现纵向或横向滚动条的现象,通过F12
调试页面元素,会发现动态的增删overflow:auto
元素属性,会解决以上问题。由此可知,动态渲染页面元素时,页面加载之前,由于页面元素尚未完全加载,导致计算元素属性值错误,会造成屏幕出现不适配,即会出现横向纵向滚动条的问题,现在的解决方案就是通过模拟增删overflow:auto
元素属性,达到重新计算元素属性值以实现屏幕适配。
二、表格错位
问题描述:对于表格中的操作栏位处于表格右侧时,会发现表格会出现上下滚动过程中数据列与操作列错位情形。
问题分析:对于该问题,通过查看元素属性,会发现是由于元素中
border
宽度过大导致的。解决方案:通过消除多余的元素
border
宽度,即取消元素border
(注意:表头th
和td
均需包含),可解决以上问题。类似写法如下:
三、横向滚动条
问题描述:对于表格中的操作栏位处于表格左侧时,会发现表格会出现上下滚动过程中数据列与操作列错位情形。
问题分析:对于该问题,通过查看元素属性,会发现是由于页面出现横向滚动条导致的。
解决方案:通过消除横向滚动条,可解决以上问题。
通过网络查询的解决方案如下:
方案一:尝试在渲染后修改数据让 table 重绘在配置化组件的
updated
钩子更新columns
数据(中间需做一层转换,禁止直接修改props
),但table
貌似不会将数据进行双向绑定,所以table
没有出现改变,也就不会触发第二次宽度计算。方案二:尝试在渲染后将 2px 的 border 去掉在浏览器中调试发现去掉
.el-table
的左右border
后,是可以解决内容溢出产生滚动条的问题的;具体做法是在updated
1s 后给el-table
绑定一个class
,去除border
,但去除border
后,页面美观度降低。方案三:将宽度计算交给浏览器通过浏览器中调试,发现将
.el-table__body-wrapper
的overflow
属性隐藏再显示,横向滚动条就不会出现了,应该是重新添加overflow: auto;
使得浏览器自身重新计算了table
的宽度,所以宽度足够的情况下不需要显示横向滚动条;
具体做法:
经过项目实践,发现方案三可行,但需要进行适当改造。
方案三适用于页面数据展示,当将表格数据展示功能抽取成组件形式后,当对页面数据进行增删操作时,会发现横向滚动条出现,进而导致表格错位问题复现,根据父子组件通信过程,可通过父组件向子组件传一随机数的方式,当检测到子组件表格数据变化时,父组件将该随机数传给子组件,从而告知子组件表格数据已变化,需要重新计算页面元素,具体代码如下:
四、拓展阅读
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/8bf7bb1180472bb35601a971c】。文章转载请联系作者。
评论