fastadmin bootstrap-table tab页面固定列不可见,高度不准确等解决方法
原因:这是因为浏览器在渲染的过程中,先把tab生成了,样式也执行了,即除了第一个tab的content,也就是(‘.tab-pane.fade’)是正常的以外,后面的带有’.tab-pane.fade’的都是display:none,也就是说,这个元素的宽度为0.
在table初始化的时候,没有宽度进行定位, 所以会导致固定列会失效,这也就是为什么刷新了表格固定列会重新出现的原因.
解决方法:
思路:先把’.tab-pane.fade’这个用js强制显示出来,用display:block,同时用透明度把它不可见,避免用户看到渲染过程,一闪一闪的.
let tableWrap = $("#content").find('.tab-pane.fade');
tableWrap.css({
"display": " block",
"opacity": "0"
})
在table初始化完成后再处理可视化
翻了一下bootstrap-table的文档,官方就提供一个onLoadSuccess的方法,我们可以在里面处理可视化.
完整的代码:
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
toolbar: "#toolbar",
pk: 'id',
sortName: 'id',
fixedColumns: true,
fixedRightNumber: 1,
columns: [columnsConfig],
onLoadSuccess:function () {
tableWrap.attr("style","");
}
});