fastadmin bootstrap-table tab页面固定列不可见,高度不准确等解决方法

作者: TAIS3 分类: JavaScript,杂七杂八 发布时间: 2022-05-15 16:41

原因:这是因为浏览器在渲染的过程中,先把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","");
    }
});

发表回复