layui踩坑日常-选项卡控制数据表格显示隐藏问题

场景图片：
在使用数据表格的时候难免会遇到和选项卡结合的案例，选项卡默认展现第一项其余的隐藏，这里我是默认展示“单日”。

发现问题：
当切换到“多日”时，表格的宽度无法自适应，全缩在了一起。

解决方法一：
给选项卡切换添加一个layui方法：layui.table.resize();可以让表格重新计算宽度。

//选项卡方法
$(".tab-title>button").on("click", function () {
    $(this).addClass("active").siblings().removeClass("active");
    let i = $(this).index();
    $(".body-item").eq(i).show().siblings(".body-item").hide();
    layui.table.resize();//表格重新计算宽度
    
    //如果是layui的选项卡，需要加个定时器
    // setTimeout(function () {
    //     layui.table.resize();//表格重新计算一下
    // }, 100)
})

实现效果：

解决方法二：
在表头管理器里给每个列添加固定宽度，注意这样一来表格可能不会和容器边缘吻合。