elementUI table fixed


element中的table表格功能是非常好用的一款功能,但是在实际使用中发现了两个问题:

1、table开启fixed功能后底部滚动条被覆盖:

 

 

 

 

2、table开启fixed功能后,上下滚动行无法对齐

 

 

 

 

如图所示:

针对问题1的解决方案有两个:

1、在公共样式中设置:

.el-table__fixed{
  height: auto !important; // 让固定列的高自适应,且设置!important覆盖ele-ui的默认样式
}
2、在数据初始化的时候修改el-table__fixed高度:
注意:此处需要使用setTimeout不能使用this.$nextTick,因为需要等el把样式全部处理完成后才能进行修改,不然会被el覆盖掉( 具体原因可以参考宏任务与微任务 )
setTimeout(() => {
      $(".el-table__fixed").css({ height: '当前table高度' - '滚动条高度' });
 });
 
针对问题2的解决方案也有两个:
1、修改源码,这个不用说,可以直接修改elementUI的源码进行处理
2、使用一个基于elementUI的table插件进行样式方面的处理,我这块使用的是 ElBigdataTable 这款插件进行处理的,这款插件基于elementUI进行的二次开发,使其table兼容大数据,引用进来后只需要把el-table改为ElBigdataTable就可以了,因为是基于element的二次开发所以对table的功能都是兼容的


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM