datagrid how to set fit or height 100%

EasyUI Forum

April 29, 2024, 11:50:13 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for Vue > datagrid how to set fit or height 100%

Pages: [1]

« previous next »

Author

Topic: datagrid how to set fit or height 100% (Read 18972 times)

fengdie

Jr. Member

Posts: 87

datagrid how to set fit or height 100%

« 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%.


	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: datagrid how to set fit or height 100%

« Reply #1 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


	Logged

fengdie

Jr. Member

Posts: 87

Re: datagrid how to set fit or height 100%

« Reply #2 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>


	Logged

fengdie

Jr. Member

Posts: 87

Re: datagrid how to set fit or height 100%

« Reply #3 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>


	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: datagrid how to set fit or height 100%

« Reply #4 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>


	Logged

Pages: [1]

« previous next »