Print Page - datagrid how to set fit or height 100%

Title: datagrid how to set fit or height 100%
Post by: fengdie on September 03, 2018, 10:47:08 PM

in porject use vue-router. layout.vue template use <router-view></router-view> tag.

now,in sub page.use datagrid component, how to set height 100%.

Title: Re: datagrid how to set fit or height 100%
Post by: jarry on September 03, 2018, 11:45:42 PM

Make sure your Tabs component can full fill its parent container. The example below shows how to set a TabPanel and DataGrid components.
https://www.jeasyui.com/demo-vue/main/index.php?plugin=Layout&theme=material-teal&pitem=SplitPanel&sort=asc

Title: Re: datagrid how to set fit or height 100%
Post by: fengdie on September 04, 2018, 03:00:28 AM

I did not use the tabs component directly.Instead use the panel component.
see example code,datagrid is full,bug pagination is Invisible

Code:

  <Panel class="f-column f-full" :border="false" bodyCls="f-column">
    <DataGrid selectionMode="single" :border="false" :data="data" :striped="true" class="f-full"
          :lazy="true"
          :total="total"
          :loading="loading"
          :pageSize="pageSize"
          :pagination="true"
          :pageLayout="['list','sep','first','prev','next','last','sep','refresh','info']"
          @pageChange="onPageChange($event)"
    >
        <GridColumn align="center" cellCss="datagrid-td-rownumber" width="30">
          <template slot="body" slot-scope="scope">
            {{scope.rowIndex + 1}}
          </template>
        </GridColumn>
        <GridColumn field="name" title="姓名" align="center"></GridColumn>
        <GridColumn field="type" title="受理类型" :width="100" align="center"></GridColumn>
        <GridColumn field="status" title="状态" :width="100" align="center"></GridColumn>
        <GridColumn field="items" title="咨询项目" halign="center"></GridColumn>
        <GridColumn field="date" title="受理日期" :width="100" align="center"></GridColumn>
        <GridColumn field="time" title="预约时间" align="center"></GridColumn>
        <GridColumn field="cometime" title="到院日期" align="center"></GridColumn>
        <GridColumn field="created_at" title="录入时间" align="center"></GridColumn>
        <GridColumn field="ascription" title="咨询人员" :width="100" align="center"></GridColumn>
        <GridColumn field="user_id" title="录入人员" :width="100" align="center"></GridColumn>
    </DataGrid>
  </Panel>

Title: Re: datagrid how to set fit or height 100%
Post by: fengdie on September 04, 2018, 04:28:54 AM

pagination is Invisible

Code:

<Layout>
  <LayoutPanel region="center" style="height:100%" bodyCls="f-column">
    <div class="datagrid-toolbar">
        <DateBox v-model="date_start" format="yyyy-MM-dd" :panelStyle="{width:'250px', height:'250px'}" style="width:110px;"></DateBox>
    </div>
    <DataGrid selectionMode="single" :border="false" :data="data" :striped="true" class="f-full"
          :lazy="true"
          :total="total"
          :loading="loading"
          :pageSize="pageSize"
          :pagination="true"
          :pageLayout="['list','sep','first','prev','next','last','sep','refresh','info']"
          @pageChange="onPageChange($event)"
    >
        <GridColumn align="center" cellCss="datagrid-td-rownumber" width="30">
          <template slot="body" slot-scope="scope">
            {{scope.rowIndex + 1}}
          </template>
        </GridColumn>
        <GridColumn field="name" title="姓名" align="center"></GridColumn>
        <GridColumn field="type" title="受理类型" :width="100" align="center"></GridColumn>
        <GridColumn field="status" title="状态" :width="100" align="center"></GridColumn>
        <GridColumn field="items" title="咨询项目" halign="center"></GridColumn>
        <GridColumn field="date" title="受理日期" :width="100" align="center"></GridColumn>
        <GridColumn field="time" title="预约时间" align="center"></GridColumn>
        <GridColumn field="cometime" title="到院日期" align="center"></GridColumn>
        <GridColumn field="created_at" title="录入时间" align="center"></GridColumn>
        <GridColumn field="ascription" title="咨询人员" :width="100" align="center"></GridColumn>
        <GridColumn field="user_id" title="录入人员" :width="100" align="center"></GridColumn>
    </DataGrid>
  </LayoutPanel>
</Layout>

Title: Re: datagrid how to set fit or height 100%
Post by: jarry on September 04, 2018, 07:08:29 AM

The Layout component has the 'height:100%' style. It will full fill its parent container. If you put the Layout within <body>, please try to set the styles for the html and body.

Code:

<style>
html,body{
  height: 100%;
  overflow: hidden;
  margin: 0;
}
</style>

EasyUI Forum

General Category => EasyUI for Vue => Topic started by: fengdie on September 03, 2018, 10:47:08 PM