在使用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属性值
这样就很简单了，我们获取到对应的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 开始，该参数也可以自动从
中的 id 参数中获取
所以如果在table.render中指定了id，就需要注意是否一致了，不存在或者错误就会抛出一个错误
Layui hint: The ID option was not found in the table instance
