在使用Layui Admin的时候遇到了切换tab时table样式错乱的问题

在网上找了一下，有很多相同的案例，但是说明的解决方案实际并不能解决我遇到的问题，和Layui社区中的这个问题《table格式缩在一起》相似

这里就直接使用他的问题中的截图作为问题说明

点击tab进行切换的时候，table显示缩在了一起，没有正常显示，正常应该是100%

看了评论中说是设置一个width: 100%，于是在done事件中添加了

$('table').width('100%');

以为是正常了，不过后来发现还是会缩在一起，此方法并没有解决问题

于是乎，查看Layui的文档，有一个重置表格尺寸的方法

该方法可重置表格尺寸和结构，其内部完成了：固定列高度平铺、动态分配列宽、容器滚动条宽高补丁 等操作。它一般用于特殊情况下（如“非窗口 resize”导致的表格父容器宽度变化而引发的列宽适配异常），以保证表格在此类特殊情况下依旧能友好展示。

语法是：table.resize('ID')

那么我们是不是可以当tab选项卡进行切换时调用这个方法来重置table呢？试一试

监听tab的操作需要element的模块，我们需要监听选项卡切换

layui.use('element', function(){
    var element = layui.element;

    // 监听 Tab 选项卡切换事件
    element.on('tab(filter)', function(data){
        console.log(this); //当前Tab标题所在的原始DOM元素
        console.log(data.index); //得到当前Tab的所在下标
        console.log(data.elem); //得到当前的Tab大容器
    });
});

然后还有一个问题，就是我们使用的是Layui Admin iframe版，所有的选项卡实际内容都是由iframe加载进来的，所以需要额外的处理一下

如何获取到对应选项卡中的iframe内容？

使用console.log打印window.frames来看一下，会发现：每次打开一个选项卡都会增加一个frame，其对应的索引和监听 Tab 选项卡切换事件中的data.index一致，那么这就简单了

分析一波，发现选项卡中的lay-id属性值正是iframe的src属性值

<li lay-id="/console" lay-attr="/console" class="layui-this"><i class="layui-icon layui-icon-home"></i></li>

<iframe src="/console" frameborder="0" class="layadmin-iframe"></iframe>

这样就很简单了，我们获取到对应的table的id属性，然后调用resize方法就可以了

// 监听 Tab 选项卡切换事件
element.on('tab(layadmin-layout-tabs)', function (data) {
    // 获取到iframe的src属性
    var src = $(this).attr('lay-id');
    // 获取到对应的iframe中table对象集合，这里取第一个
    var tableDom = window.frames[data.index].document.getElementsByTagName('table')[0];
    // 判断是否存在对应对象以及是否存在table的id属性
    if (tableDom !== undefined && tableDom.id !== undefined && tableDom.id !== '') {
        // 存在则获取iframe元素的Window对象
        var iframe = $('iframe[src="' + src + '"]')[0].contentWindow;
        // 调用resize
        iframe.layui.table.resize(tableDom.id);
    }
});

需要注意的就是table的id属性了，id 是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，值得注意的是：从 layui 2.2.0 开始，该参数也可以自动从 <table id="test"></table> 中的 id 参数中获取

所以如果在table.render中指定了id，就需要注意是否一致了，不存在或者错误就会抛出一个错误

Layui hint: The ID option was not found in the table instance

任何个人或团体，未经允许禁止转载本文：《解决Layui中切换tab时table样式错乱问题》，谢谢合作！