用bootstrap |
您所在的位置:网站首页 › vue bootstrap冻结列无效 › 用bootstrap |
我是个做后台的,前端不熟,搞了一个下午,总结一下 1.更改bootstrap-table.js,在bootstrap-table-min.js是没有这行代码的。注释掉这2行以后,会导致表头无法固定,该方法不可用。 if (!this.options.cardView && this.options.showHeader && this.options.height) { this.$tableHeader.show(); // this.resetHeader(); // padding += this.$header.outerHeight(true) + 1; } 在我的程序中,发现F12使用手机模式是是不会出现表头偏移的,只有用浏览器(17寸笔记本)才会出现这个情况 2.在onPostBody中手动赋值,可能因为本人菜的原因,不可用 这里弄了我一下午,主要是取不到固定后的表头标签。在加载table以后再去取也取不到,这里很奇怪 最开始按照搜索的其他答案,发现标签根本不对,搜不到。 后面我开始从fix-table-header 取th也取不到,最多取到table元素,往下children就是为0了。甚至.th-inner.sortable.both发现也取不到超长的元素 我怀疑人生。。。明明整个table元素都取到了,这里求前端同学解答。看F12发现实际上会生成不止一个table,带有自己id标记的table应该是被隐藏了,因为往下滚动的时候发现元素居然“在上面”,我猜测
附一下取正常width的代码,如果取的到加长后的固定表头元素,就可以直接更改width了。 var th = $("#table-main thead th") console.log(th); th.each(function(){ var th = $(this).children()[0]; var thName = $(th).text(); console.log(thName+":"+$(this).css("width")); }); 3.改css第一种:我最终采用了这种,这样子其实不能完美解决,还是有一点点偏移但是一眼看去好多了,同时空间就有点浪费了,但是我是也没办法了。。。 .fht-cell{ width:13rem!important; //width:135px!important; } 第二种:会导致小屏幕时不会滚动 .table { table-layout:fixed !important; } -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 第二天看源码的时候有了思路,不过大过年的假期在家里卡了整整一天的时间,我也懒得看了,有兴趣的可以去查一查。 DOM结构如下:
在fitHeader函数中,函数的最后有一段代码就是找tr里的th元素,然后赋值width(有一段包含在if里的同样代码其实并没有触发) var zoomWidth = $th.innerWidth() - $th.find('.fht-cell').width(); $th.find('.fht-cell').width($this.innerWidth() - zoomWidth); 主要问题就出现在$this.innerWidth(),我在手机模式和正常模式打log,发现偏移的情况就是$this.innerWidth()大了,那么如果要追究问题去深究源码,应该在加载元素时设置好元素大小。 这里也同时证明了改.fht-cel能生效的原因。
20200218更新: 在测试中发现引用了bootstrap-table.js是没问题的,bootstrap-table.min.js是有问题的。在寻找解决表头偏移方法时可能下载了多个版本的js,也不确定该js是哪个版本,等审核通过以后再放上来。 在发现表头不会偏移以后,这段时间还有做的一个改动是更改了jquery的版本,同时下载到本地了,可能也有影响。。。头大 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |