首页 > 其他 > 详细

elementUI table fixed

时间:2021-05-17 22:00:14      阅读:18      评论:0      收藏:0      [点我收藏+]

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的功能都是兼容的

elementUI table fixed

原文:https://www.cnblogs.com/sixrookie/p/14777274.html

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