2023年6月20日发(作者：)

layuitable切换html,解决Layui中切换tab时table样式错乱问题在使⽤Layui Admin的时候遇到了切换tab时table样式错乱的问题在⽹上找了⼀下，有很多相同的案例，但是说明的解决⽅案实际并不能解决我遇到的问题，和Layui社区中的这个问题《table格式缩在⼀起》相似这⾥就直接使⽤他的问题中的截图作为问题说明点击tab进⾏切换的时候，table显⽰缩在了⼀起，没有正常显⽰，正常应该是100%看了评论中说是设置⼀个width: 100%，于是在done事件中添加了$('table').width('100%');以为是正常了，不过后来发现还是会缩在⼀起，此⽅法并没有解决问题于是乎，查看Layui的⽂档，有⼀个重置表格尺⼨的⽅法该⽅法可重置表格尺⼨和结构，其内部完成了：固定列⾼度平铺、动态分配列宽、容器滚动条宽⾼补丁 等操作。它⼀般⽤于特殊情况下(如“⾮窗⼝ resize”导致的表格⽗容器宽度变化⽽引发的列宽适配异常)，以保证表格在此类特殊情况下依旧能友好展⽰。语法是：('ID')那么我们是不是可以当tab选项卡进⾏切换时调⽤这个⽅法来重置table呢？试⼀试监听tab的操作需要element的模块，我们需要监听选项卡切换('element', function(){var element = t;// 监听 Tab 选项卡切换事件('tab(filter)', function(data){(this); //当前Tab标题所在的原始DOM元素(); //得到当前Tab的所在下标(); //得到当前的Tab⼤容器});});然后还有⼀个问题，就是我们使⽤的是Layui Admin iframe版，所有的选项卡实际内容都是由iframe加载进来的，所以需要额外的处理⼀下如何获取到对应选项卡中的iframe内容？使⽤打印来看⼀下，会发现：每次打开⼀个选项卡都会增加⼀个frame，其对应的索引和监听 Tab 选项卡切换事件中的⼀致，那么这就简单了分析⼀波，发现选项卡中的lay-id属性值正是iframe的src属性值这样就很简单了，我们获取到对应的table的id属性，然后调⽤resize⽅法就可以了// 监听 Tab 选项卡切换事件('tab(layadmin-layout-tabs)', function (data) {// 获取到iframe的src属性var src = $(this).attr('lay-id');// 获取到对应的iframe中table对象集合，这⾥取第⼀个var tableDom = [].mentsByTagName('table')[0];// 判断是否存在对应对象以及是否存在table的id属性if (tableDom !== undefined && !== undefined && !== '') {// 存在则获取iframe元素的Window对象var iframe = $('iframe[src="' + src + '"]')[0].contentWindow;// 调⽤();}});需要注意的就是table的id属性了，id 是对表格的数据操作⽅法上是必要的传递条件，它是表格容器的索引，值得注意的是：从 layui 2.2.0开始，该参数也可以⾃动从中的 id 参数中获取所以如果在中指定了id，就需要注意是否⼀致了，不存在或者错误就会抛出⼀个错误Layui hint: The ID option was not found in the table instance

2023年6月20日发(作者：)

layuitable切换html,解决Layui中切换tab时table样式错乱问题在使⽤Layui Admin的时候遇到了切换tab时table样式错乱的问题在⽹上找了⼀下，有很多相同的案例，但是说明的解决⽅案实际并不能解决我遇到的问题，和Layui社区中的这个问题《table格式缩在⼀起》相似这⾥就直接使⽤他的问题中的截图作为问题说明点击tab进⾏切换的时候，table显⽰缩在了⼀起，没有正常显⽰，正常应该是100%看了评论中说是设置⼀个width: 100%，于是在done事件中添加了$('table').width('100%');以为是正常了，不过后来发现还是会缩在⼀起，此⽅法并没有解决问题于是乎，查看Layui的⽂档，有⼀个重置表格尺⼨的⽅法该⽅法可重置表格尺⼨和结构，其内部完成了：固定列⾼度平铺、动态分配列宽、容器滚动条宽⾼补丁 等操作。它⼀般⽤于特殊情况下(如“⾮窗⼝ resize”导致的表格⽗容器宽度变化⽽引发的列宽适配异常)，以保证表格在此类特殊情况下依旧能友好展⽰。语法是：('ID')那么我们是不是可以当tab选项卡进⾏切换时调⽤这个⽅法来重置table呢？试⼀试监听tab的操作需要element的模块，我们需要监听选项卡切换('element', function(){var element = t;// 监听 Tab 选项卡切换事件('tab(filter)', function(data){(this); //当前Tab标题所在的原始DOM元素(); //得到当前Tab的所在下标(); //得到当前的Tab⼤容器});});然后还有⼀个问题，就是我们使⽤的是Layui Admin iframe版，所有的选项卡实际内容都是由iframe加载进来的，所以需要额外的处理⼀下如何获取到对应选项卡中的iframe内容？使⽤打印来看⼀下，会发现：每次打开⼀个选项卡都会增加⼀个frame，其对应的索引和监听 Tab 选项卡切换事件中的⼀致，那么这就简单了分析⼀波，发现选项卡中的lay-id属性值正是iframe的src属性值这样就很简单了，我们获取到对应的table的id属性，然后调⽤resize⽅法就可以了// 监听 Tab 选项卡切换事件('tab(layadmin-layout-tabs)', function (data) {// 获取到iframe的src属性var src = $(this).attr('lay-id');// 获取到对应的iframe中table对象集合，这⾥取第⼀个var tableDom = [].mentsByTagName('table')[0];// 判断是否存在对应对象以及是否存在table的id属性if (tableDom !== undefined && !== undefined && !== '') {// 存在则获取iframe元素的Window对象var iframe = $('iframe[src="' + src + '"]')[0].contentWindow;// 调⽤();}});需要注意的就是table的id属性了，id 是对表格的数据操作⽅法上是必要的传递条件，它是表格容器的索引，值得注意的是：从 layui 2.2.0开始，该参数也可以⾃动从中的 id 参数中获取所以如果在中指定了id，就需要注意是否⼀致了，不存在或者错误就会抛出⼀个错误Layui hint: The ID option was not found in the table instance