I always thought that if the tab page of easyui was not opened, the data would not be loaded. In fact, as long as the page of the panel of the tab has a url, the data would be loaded automatically. But if it was not opened, if the layout in the panel page of the tab was set to fit:true, the initial width and height of the layout would be 0

In fact, you can do this by setting a fixed width and height at the beginning. For example, JS can be used to set the height automatically

Main page (parent page):

//Omit other layout components from the main page
<div id="zjTools" data-options="region:'east',iconCls:'',title:'',collapsible: false,split:true, border: false,minWidth: 414, maxWidth: 800,collapsed: true" htitle="Display group price tool" style="width:414px;border-left-width: 1px;">
	<div id="zjgztab" data-options="tools:'#tab-tools'">
	    <div data-options="title: 'Quota base', refreshable: true,iconCls:'',iniframe: true, href: 'queryEprjNormDirectory?eprjInfoId=<s:property value="id"/>'" name="dek" id="dek"></div>
	    <div data-options="title: 'Scheme Library', refreshable: true,iconCls:'',iniframe: true, href: 'queryCcsLib?eprjInfoId=<s:property value="id"/>&object.type=<s:if test="step!=0">2</s:if><s:else>0</s:else>'" name="fak"></div>
		<div data-options="title: 'Standard items', refreshable: true,iconCls:'',iniframe: true, href: 'queryEprjStdList?eprjInfoId=<s:property value="id"/>'" name="bzfx"></div> 
		<s:if test="object.makeRule=='MR3'">
	    	<div data-options="title: 'Equipment library', refreshable: true,iconCls:'',iniframe: true, href: ''" name="sbk"></div>		    
	    </s:if>
	    <div data-options="title: 'Share', refreshable: true,iconCls:'',iniframe: true, href: ''" name="ft"></div>
	    <s:if test="function[3]==1">   
	    <div data-options="title: 'Item correspondence', refreshable: true,iconCls:'',iniframe: true, href: ''" name="bsfx"></div>
	    </s:if>
	    
	</div>
</div>

panel page in a tab:

<div id="dekLayout" class="easyui-layout" data-options="fit: false" style="width:414px;">
   <div id="northPanel" data-options="region: 'north', border: false" style="height: 33px; border-bottom-width: 1px;">
        <div  class="easyui-toolbar" data-options="">Contents of toolbars...</div>
   </div>
   <div id="dekcenLayout" data-options="region: 'center', border: false,fit: false,title: '',iconCls:''" style="border-bottom-width: 1px;overflow: auto">
        <ul id="dektree" class="__tree" data-options=""></ul>//Preventing easyui's tree in the middle
   </div>
   <div id="dekSouth" data-options="region: 'south', title: '', collapsed: false, border: false,split:true" style="height: 240px;border-top-width: 1px;">
   </div>
</div>

//Dynamically set the height of layout center and south in JS
$(function({
    var height=$(window.parent.document).find("#zjgztab").height()-30; / / the subtracted height is obtained by viewing elements according to the actual rendered page
	$('#dekLayout').css("height", height);
	var northHeight = $("#northPanel").height();
	var dektabHeight = $("#dekSouth").height();
	$("#dekSouth").parent().css("top", height-dektabHeight);
	$('#dekcenLayout').css("height", height-northHeight-dektabHeight);
}));