首页 > 其他 > 详细

Element UI Table组件固定列及滚动条样式异常

时间:2020-06-18 20:19:05      阅读:587      评论:0      收藏:0      [点我收藏+]

序言  

在使用Elemet UI时,常用的el-table组件的固定列显示不正常:

a.固定列最后一行显示不正常,最后一行横向只显示一部分。

b.用横向滚动条滚动表格时,固定列跟着一起滚动。

解决方法

a.解决问题a时百度挺管用,很多人都遇到这个问题,于是按照别人的答案,修改固定列的高度。

.el-table__fixed{

  height:100% 1important;

}

.el-table__fixed-right{

  height:100% 1important;

}

加上之后就解决了,固定列最后一行显示不完整的问题;

b. 解决b问题时,百度后发现居然没有人遇到我这种问题;

  1.将自己定义的所有样式全都去除,只留固定列的设置,任然显示不正常。

  2.浏览器调试模式观察生成的html代码中样式和官网对比,任然找不到问题所在(但是应该是有差别的,我当时没有找到)

  3.请教了好几位同事,在和其中一位同事重现我的问题时,用他的页面中的el-table组件进行重现。

第一次打开用他的页面,滚动条能正常显示并且滚动。接下来看我的页面却不行,奇怪的是,切回去看他的页面显示也不正常了。

于是他猜想是样式污染导致的。果不其然,全局搜索发现,在其他的vue组件中有如下样式。

  .el-table--scrollable-x .el-table__body-wraper{

    overflow:visible;

  }

   .el-table__body-wraper{

    overflow:visible;

  }

这个样式正式固定列的样式,并且这个样式没有写在任何class的内部,直接污染了整个项目的所有用到固定列的el-table组件。

最后删掉这些样式问题解决。

总结:

1. 感谢同事的帮助

2. 使用UI框架时样式代码用<style scoped>,或者给元素自定义class然后再在自定义的class中去改。

3. UI框架常用组件出现异常显示,考虑样式污染。

 

Element UI Table组件固定列及滚动条样式异常

原文:https://www.cnblogs.com/chaojizhengui/p/ElTable_fixed.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!