Hi,
after use the sample code dynamic tab content
https://www.jeasyui.com/demo-angular/main/index.php?plugin=Tabs&theme=material&dir=ltr&pitem=Dynamic%20Tab%20Content&sort=, the datagrid height cannot be 100% of the tab.
the following is the code:
tab component:
<eui-datagrid
[pagination]="true"
[lazy]="true"
[data]="data"
[total]="total"
[pageNumber]="pageNumber"
[pageSize]="pageSize"
[pagePosition]="pagePosition"
[loading]="loading"
(pageChange)="onPageChange($event)" bodyCls="f-column" style="height:100%;border: 1px solid red;padding: 0px">
<eui-grid-column field="inv" title="Inv No" width="100%"></eui-grid-column>
<eui-grid-column field="name" title="Name" width="100%"></eui-grid-column>
<eui-grid-column field="amount" title="Amount" width="100%" align="right"></eui-grid-column>
<eui-grid-column field="price" title="Price" width="100%" align="right"></eui-grid-column>
<eui-grid-column field="cost" title="Cost" width="100%" align="right"></eui-grid-column>
<eui-grid-column field="note" title="Note" width="100%"></eui-grid-column>
</eui-datagrid>
appcomonent:
<eui-layout #layout fit ="true" style="height: 100%">
<eui-layout-panel region="north" class="logo" title="后台管理" style="text-align:center;">
</eui-layout-panel>
<eui-layout-panel region="west" title="导航" collapsible="true" euiResizable handles="e" style="width:150px;" (resizing)="layout.updatePaddings()">
<eui-tree [data]="menuData" (nodeClick) ="menuClick($event)"></eui-tree>
</eui-layout-panel>
<eui-layout-panel region="center" bodyCls="f-column" style="height:100%;">
<eui-tabs #tabsHost style="display:flex;flex:1">
<eui-tab-panel [title]="'Home'" iconCls="icon-ok">
<p>The home tab.</p>
</eui-tab-panel>
<eui-tab-panel *ngFor="let tab of tabs" [title]="tab.title" bodyCls="f-column" style="height:100%;border: 1px solid red;padding: 0px">
<tab-detail [component]="tab.component"></tab-detail>
</eui-tab-panel>
</eui-tabs>
</eui-layout-panel>
<eui-layout-panel region="south">
<eui-panel-header>
<div class="panel-title" style="text-align:center">2015-2017</div>
</eui-panel-header>
</eui-layout-panel>>
</eui-layout>