Layui的tab选项卡切换时数据表格加载异常

有时一个页面可能会有多个内容，但又不希望这几个内容同时显示的时候使用Tab选项卡是再适合不过了，简洁又方便。不过可能选项卡里面的内容是数据表格，这时候就要注意了layui数据表格很有可能会出现宽度被压缩的情况。

像这样，第一个tab选项卡里的内容是正常的但是除了第一个以外其他的选项卡里面的数据表格就会被像这样子压缩。既然是数据表格的宽度出了问题，那首先就要从表格开始想问题的来源。像这个问题，就应该从数据表格的宽度入手。这里是因为表格的尺寸没有加载出来，那就需要重新加载一次，至于什么时候加载，最好就是在Tab选项卡切换的时候了。这就需要监听到Tab选项卡切换的事件。 因为是layui里面的东西，所以一般在里面可以找到tab的监听事件。在手册里面的内置模板的常用元素操作里面就写有Tab选项卡切换的监听事件。

 

想使用Tab选项卡的功能就得要先加载这个模块的功能，就是layui里的element模块。

       接着就是写Tab选项卡切换时的监听事件了。

layuiElement是加载好的element模块，tab是监听Tab选项卡切换事件，TabCheLianGuanLi是选项卡div里的lay-filter属性值，见如下：

然后就是回调函数了，参数data在这可不写，如需要或的Tab选项卡信息的就需要填写。刚刚说了，问题是数据表格的宽度没有加载成功，那现在就要把表格的尺寸重新加载一次。

table.resize()就是重置表格尺寸的方法，tabVehicle是需要重载尺寸的表格的名称，括号里面写是表格的id,即elem属性。这样每一次切换选项卡的时候所切换到的数据表格都会刷新一次，就不会出现尺寸异常的问题了。