Layui的tab选项卡切换时数据表格加载异常
有时一个页面可能会有多个内容,但又不希望这几个内容同时显示的时候使用Tab选项卡是再适合不过了,简洁又方便。不过可能选项卡里面的内容是数据表格,这时候就要注意了layui数据表格很有可能会出现宽度被压缩的情况。
想使用Tab选项卡的功能就得要先加载这个模块的功能,就是layui里的element模块。
接着就是写Tab选项卡切换时的监听事件了。
layuiElement是加载好的element模块,tab是监听Tab选项卡切换事件,TabCheLianGuanLi是选项卡div里的lay-filter属性值,见如下:
然后就是回调函数了,参数data在这可不写,如需要或的Tab选项卡信息的就需要填写。刚刚说了,问题是数据表格的宽度没有加载成功,那现在就要把表格的尺寸重新加载一次。
table.resize()就是重置表格尺寸的方法,tabVehicle是需要重载尺寸的表格的名称,括号里面写是表格的id,即elem属性。这样每一次切换选项卡的时候所切换到的数据表格都会刷新一次,就不会出现尺寸异常的问题了。