bootstrap-table固定表头后出现的列与表头无法对齐问题

使用bootstap做简单的后台管理框架有丰富插件可以使用,但是在使用bootstap-table插件时发现一个bug,当table需要展示的列比较多后,在使用了固定表头和锁定列后点击分页或排序功能时会出现表头和数据不能对其的问题。

具体情境如下

1、初次加载没有问题
在这里插入图片描述
2、然后移动下方的滚动条至右侧
在这里插入图片描述
3、滚动条在这个位置时,点击下边分页功能或者各列的排序功能时,会出现如下问题
在这里插入图片描述
表头又重新从起始位置加载了,而下方数据位置未改变,故而无法对齐。

分析问题

通过调试发现,在固定表头和锁定某些列后bootstrap-table插件会把表头单独移出自行与数据列对齐,网上有的解决方案是注释下边两行,但是这样会使冻结列和固定表头失效,无法两全其美。具体代码在bootstrap-table.js文件中,本人使用的版本是1.18.3
在这里插入图片描述
我顺着这思路继续看源码发现其实每次重新加载是这几行代码起作用,每次会把之前的表头去掉然后重新加载表头
在这里插入图片描述
发现问题解决就比较简单了,只需让代码每次在初始化的时候加载一次就可以,我增加了如下判断在这里插入图片描述
修改后的代码如下

        this.$tableHeader.css('margin-right', scrollWidth)
            .find('table')
            .css('width', this.$el.outerWidth())
            .attr('class', this.$el.attr('class'));
          //所解决问题是在数据列多时滚动条划到右侧点击排序或分页时数据与表头不对应
        if(this.$tableHeader.find('table').children("thead").length<1){
            this.$tableHeader.find('table').append(this.$header_);
        }

还有另一处也需要增加判断
在这里插入图片描述

if(this.$tableHeader.find('table').children("thead").length<1){
            this.$header_ = this.$header.clone(true, true);
            this.$selectAll_ = this.$header_.find('[name="btSelectAll"]');
        }

如此改法显得比较笨重,不是很优雅,目前只能算解决了这个问题,如果各位大神有其他更好的方式望能提出好意见。
如此改法在chrome浏览器中没有问题,但是在ie浏览器中会出现不对齐的情况,可以适量修改此处在这里插入图片描述

希望能帮助大家,共同进步!

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值