zoukankan      html  css  js  c++  java
  • Element UI Table组件固定列及滚动条样式异常

    序言  

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

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

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

    解决方法

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

    .el-table__fixed{

      height:100% !important;

    }

    .el-table__fixed-right{

      height:100% !important;

    }

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

    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框架常用组件出现异常显示,考虑样式污染。

  • 相关阅读:
    Hadoop-HA配置详细步骤
    Oracle 事务
    2 Oracle用户和表空间
    oracle 客户端监听文件配置
    Django 关联管理器
    第2讲 | 网络分层的真实含义是什么?
    hihoCoder #1151 : 骨牌覆盖问题·二 (矩阵快速幂,DP)
    poj 2411 Mondriaan's Dream (轮廓线DP)
    SPOJ COT2 Count on a tree II (树上莫队,倍增算法求LCA)
    HYSBZ 1086 王室联邦 (树的分块)
  • 原文地址:https://www.cnblogs.com/chaojizhengui/p/ElTable_fixed.html
Copyright © 2011-2022 走看看