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>

我说了要改成chinese

see https://www.jeasyui.com/demo-vue/demo.php?cname=datagrid&pitem=pagination2
initialize datagrid component, the pageNumber is `1`,but pagination `prev` `first` button is not disabled

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

datagrid component no find 'striped','rownumbers' property

in project,use vue-router.when the pagination button is disabled,click will modify url

1、
how to set datagrid parameter like 'easyui for jquery' pagination ajax request.（怎么设置才能像jquery版那样，ajax分页）
The server returned 10 data, set a total of 1000 but only 1 page at the front end（服务器返回了10条数据，设置了total为1000.但前端只有1页）

2、how to set datagrid pagination like https://www.jeasyui.com/demo-vue/demo.php?cname=pagination&pitem=layout

i recommend,datebox component 'props' define 'panelStyle' default value。

Code:

        panelStyle: {
            type: Object,
            default: () => {return {height:'250px',width:'250px'}}
        }

<DateBox v-model="date" style="width:120px;"></DateBox>
see attachment

how to change language to chinese

Then appLayout layout, which uses the datagrid component. The datagrid width will overflow. for details, see attached
再appLayout布局，里面使用datagrid组件。datagrid宽度会溢出。详情见附件.

View the examples in the attachment image
this example use vue-router plugins,click SideMenu,open new tabs.

need Messager component

折叠左侧菜单，布局无法自动伸缩。
toggle SideMenu state,LayoutPanel don't auto resize

Code:

<template>
  <Layout>
    <LayoutPanel region="north" :border="false" bodyCls="cywebos-header">
      <LinkButton @click="toggle">折叠</LinkButton>
    </LayoutPanel>
    <LayoutPanel :style="{width:width+'px'}" region="west" :border="false" bodyCls="cywebos-sidebar">
        <SideMenu
                :data="menus"
                :collapsed="collapsed"
                @selectionChange="selection=$event">
        </SideMenu>
    </LayoutPanel>
    <LayoutPanel region="center" :border="false" bodyCls="cywebos-body" style="height:100%">
      121221
    </LayoutPanel>
  </Layout>
</template>

<script>
export default {
  data() {
    return {
      width: 230,
      collapsed: false,
      selection: null,
      menus: [
        {
          text: "Item1",
          iconCls: "icon-sum",
          state: "open",
          children: [
            {
              text: "Option1"
            },
            {
              text: "Option2"
            },
            {
              text: "Option3",
              children: [
                {
                  text: "Option31"
                },
                {
                  text: "Option32"
                }
              ]
            }
          ]
        },
        {
          text: "Item2",
          iconCls: "icon-more",
          children: [
            {
              text: "Option4"
            },
            {
              text: "Option5"
            },
            {
              text: "Option6"
            }
          ]
        }
      ]
    };
  },
  methods: {
    toggle() {
      this.collapsed = !this.collapsed;
      this.width = this.collapsed ? 50 : 230;
    }
  }
};
</script>

<style>
.cywebos-header {
  color: #fff;
  height: 50px;
  line-height: 50px;
  background-color: #3c8dbc;
}
.cywebos-sidebar {
  background-color: #1a2226;
}
.cywebos-body {
  background: #ecf0f5;
}
</style>

How to implement the navigation menu, like this http://element.eleme.io/#/zh-CN/component/menu