Element-ui】【element ui】element-ui的table,左右两边的固定列挡住了横向滚动条怎么办?

2020-12-23 14:29发布

4条回答
王胡子
2楼 · 2021-02-23 16:05

修改中间横向滚动条的左右边距,或者浮层在左右两列之上。

当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条很难拖动,查找原因你会发现原来是固定的列把滚动条给挡住了,只有超出固定的部分滚动条才可以拖动。


解决办法:

1.修改el-table__fixed样式


.el-table {

    .el-table__fixed {

      height:auto !important; 

      bottom:17px !important;  

    }

  }

效果:就是设置bottom值,使得不盖住滚动条。缺点:不适用与含有合计的table,如果含有合计,合计也会上移。


2.修改el-table__body-wrapper样式的层级,随便设个层级就可


 .el-table__body-wrapper{

       z-index: 2


}

征戰撩四汸
4楼 · 2021-09-13 17:01

1.修改el-table__fixed样式

.el-table {
    .el-table__fixed {
      height:auto !important; 
      bottom:17px !important;  
    }
  }


果:就是设置bottom值,使得不盖住滚动条。缺点:不适用与含有合计的table,如果含有合计,合计也会上移。

2.修改el-table__body-wrapper样式的层级,随便设个层级就可

 .el-table__body-wrapper{

       z-index: 2

}

效果:解决滚动条被遮住的问题,同时含有合计也适用,缺点:就是表头和合计那部分有阴影,中间的部分没有阴影,不过不影响效果,问题不大。

3.如果上面两种办法没有满足需求,就自己动手写table吧



嘿呦嘿呦拔萝卜
5楼 · 2021-09-15 16:18

稍微改改就可以兼容全部主流,主要是非IE的没有window.scroll,可以用计时器定时计算scrollTop来模拟。有需要的话再说。
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
">

数据栏百分比动画显示