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