@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/grid/drag/row-drag-ctrl-composition-api.vue

@@ -2,8 +2,8 @@
   <tiny-grid :row-class-name="rowClassName" :data="tableData" row-key :drop-config="dropConfig">
     <tiny-grid-column field="id" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="触发源" width="100">
-      <template #default>
-        <div class="only-me-can-drag">拖拽触发源</div>
+      <template #default="{ row }">
+        <div class="only-me-can-drag">拖拽触发源{{ row.id }}</div>
       </template>
     </tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
@@ -18,7 +18,7 @@ import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
-const dropConfig = ref({
+const dropConfig = {
   plugin: Sortable,
   row: true,
   trigger: '.only-me-can-drag', // 触发源控制
@@ -27,7 +27,7 @@ const dropConfig = ref({
     if (row.id === '8') return false // return false 时取消拖动
   },
   column: false // 取消列拖拽
-})
+}
 const tableData = ref([
   {
     id: '1',

package/demos/pc/app/grid/edit/trigger-mode-hm-editing-composition-api.vue

@@ -5,7 +5,7 @@
       ref="theGridRef"
       :data="tableData"
       seq-serial
-      :edit-config="{ trigger: 'manual', mode: 'row', autoClear: false }"
+      :edit-config="{ trigger: 'manual', mode: 'cell', autoClear: false }"
     >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
@@ -23,7 +23,7 @@
       ></tiny-grid-column>
       <tiny-grid-column title="操作" width="200" align="center">
         <template #default="data">
-          <template v-if="$refs.theGrid && $refs.theGrid.hasActiveRow(data.row)">
+          <template v-if="$refs.theGridRef && $refs.theGridRef.hasActiveRow(data.row)">
             <tiny-button size="mini" @click="saveRowEvent(data.row)"> 保存 </tiny-button>
             <tiny-button size="mini" @click="cancelRowEvent(data.row)"> 取消 </tiny-button>
           </template>
@@ -90,12 +90,20 @@ const tableData = ref([
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   }
 ])
-const theGridRef = ref()
+const theGridRef = ref('theGridRef')
 
 function editRowEvent(row) {
-  theGridRef.value.setActiveRow(row).then(() => {
-    getActiveRow()
-  })
+  if (row.name === 'RFV有限责任公司') {
+    // 只激活区域单元格编辑
+    theGridRef.value.setActiveCell(row, 'area').then(() => {
+      this.getActiveRow()
+    })
+  } else {
+    // mode: 'cell' 时默认激活第一个单元格
+    theGridRef.value.setActiveRow(row).then(() => {
+      this.getActiveRow()
+    })
+  }
 }
 
 function saveRowEvent() {

package/demos/pc/app/grid/edit/trigger-mode-hm-editing.spec.js

@@ -11,5 +11,10 @@ test('手动触发编辑', async ({ page }) => {
     })
     .getByRole('button', { name: '编辑' })
     .click()
-  await expect(page.getByRole('row', { name: '1 保存 取消' }).locator('input[type="text"]')).toBeVisible()
+  await expect(
+    page.getByRole('row', { name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863' }).getByRole('textbox')
+  ).toBeVisible()
+
+  await page.getByRole('row', { name: '3 RFV' }).getByRole('button').click()
+  await expect(page.getByRole('combobox')).toBeVisible()
 })

package/demos/pc/app/grid/edit/trigger-mode-hm-editing.vue

@@ -5,7 +5,7 @@
       ref="theGrid"
       :data="tableData"
       seq-serial
-      :edit-config="{ trigger: 'manual', mode: 'row', autoClear: false }"
+      :edit-config="{ trigger: 'manual', mode: 'cell', autoClear: false }"
     >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
@@ -36,7 +36,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Grid, GridColumn, Button } from '@opentiny/vue'
 
 export default {
@@ -101,9 +101,17 @@ export default {
   },
   methods: {
     editRowEvent(row) {
-      this.$refs.theGrid.setActiveRow(row).then(() => {
-        this.getActiveRow()
-      })
+      if (row.name === 'RFV有限责任公司') {
+        // 只激活区域单元格编辑
+        this.$refs.theGrid.setActiveCell(row, 'area').then(() => {
+          this.getActiveRow()
+        })
+      } else {
+        // mode: 'cell' 时默认激活第一个单元格
+        this.$refs.theGrid.setActiveRow(row).then(() => {
+          this.getActiveRow()
+        })
+      }
     },
     saveRowEvent() {
       this.$refs.theGrid.clearActived().then(() => {

package/demos/pc/app/grid/event/cell-mouse-event-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-grid :data="tableData" @cell-mouseenter="cellMouseenterEvent">
+    <tiny-grid :data="tableData" @cell-mouseenter="cellMouseenterEvent" @cell-mouseleave="cellMouseleaveEvent">
       <tiny-grid-column type="index" title="序号" width="100"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>

package/demos/pc/app/grid/event/context-menu-event-composition-api.vue

@@ -2,6 +2,7 @@
   <div>
     <tiny-grid
       :data="tableData"
+      @header-cell-context-menu="headerMenuClick"
       @footer-cell-context-menu="footerMenuClick"
       :context-menu="{
         header: { options: headerMenus },

package/demos/pc/app/grid/event/edit-event-composition-api.vue

@@ -5,7 +5,7 @@
     @edit-closed="editClosed"
     @edit-disabled="editDisabled"
     seq-serial
-    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, activeMethod }"
   >
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>

package/demos/pc/app/grid/expand/set-row-expansion-composition-api.vue

@@ -6,7 +6,12 @@
       <tiny-button @click="toggleRowExpansion">手动切换展开行</tiny-button>
     </div>
     <br />
-    <tiny-grid :data="tableData" ref="grid" border :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
+    <tiny-grid
+      :data="tableData"
+      ref="gridRef"
+      border
+      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
       <tiny-grid-column type="expand" title="操作" width="60">
@@ -82,11 +87,11 @@ const tableData = ref([
     boole: true
   }
 ])
-const gridRef = ref()
+const gridRef = ref('gridRef')
 
 const setRowExpansion = () => {
   gridRef.value.clearRowExpand()
-  gridRef.value.setRowExpansion([this.tableData[1], this.tableData[0]], true)
+  gridRef.value.setRowExpansion([tableData.value[1], tableData.value[0]], true)
 }
 
 const setAllRowExpansion = () => {
@@ -94,7 +99,7 @@ const setAllRowExpansion = () => {
 }
 
 const toggleRowExpansion = () => {
-  gridRef.value.toggleRowExpansion(this.tableData[1])
+  gridRef.value.toggleRowExpansion(tableData.value[1])
 }
 
 const checkboxEdit = (h, { row, column }) => {

package/demos/pc/app/grid/highlight/highlight-hover-row-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-grid :data="tableData">
+  <tiny-grid highlight-hover-row :data="tableData">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>

package/demos/pc/app/grid/highlight/highlight-hover-row.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-grid :data="tableData">
+  <tiny-grid highlight-hover-row :data="tableData">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>

package/demos/pc/app/grid/loading/{grid-loading-off-tip-composition-api.vue → grid-custom-loading-composition-api.vue}

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="init">重试</tiny-button>
     <br /><br />
-    <tiny-grid :data="tableData">
+    <tiny-grid :data="tableData" :loading-component="loadingComponent()" :loading="loading">
       <tiny-grid-column type="index" width="5%"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
       <tiny-grid-column field="city" title="城市" sortable></tiny-grid-column>
@@ -17,9 +17,7 @@ import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton }
 const tableData = ref([])
 const loading = ref(true)
 
-init()
-
-function init() {
+const init = () => {
   tableData.value = []
   loading.value = true
   setTimeout(() => {
@@ -53,4 +51,31 @@ function init() {
     loading.value = false
   }, 2000)
 }
+
+init()
+
+const loadingComponent = () => (
+  <div class="custom-loading">
+    <span>正在加载中。。。</span>
+  </div>
+)
 </script>
+
+<style scoped>
+.custom-loading {
+  position: absolute;
+  font-size: 20px;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.3);
+}
+.custom-loading[visible='false'] {
+  display: none;
+}
+</style>

package/demos/pc/app/grid/loading/grid-custom-loading.spec.js

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义表格加载', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-loading#loading-grid-custom-loading')
+  await expect(page.getByText('正在加载中。。。')).toBeVisible()
+})

package/demos/pc/app/grid/loading/{grid-loading-off-tip.vue → grid-custom-loading.vue}

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="init">重试</tiny-button>
     <br /><br />
-    <tiny-grid :data="tableData">
+    <tiny-grid :data="tableData" :loading-component="loadingComponent()" :loading="loading">
       <tiny-grid-column type="index" width="5%"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
       <tiny-grid-column field="city" title="城市" sortable></tiny-grid-column>
@@ -29,6 +29,13 @@ export default {
     this.init()
   },
   methods: {
+    loadingComponent() {
+      return (
+        <div class="custom-loading">
+          <span>正在加载中。。。</span>
+        </div>
+      )
+    },
     init() {
       this.tableData = []
       this.loading = true
@@ -66,3 +73,22 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.custom-loading {
+  position: absolute;
+  font-size: 20px;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.3);
+}
+.custom-loading[visible='false'] {
+  display: none;
+}
+</style>

package/demos/pc/app/grid/operation-column/clear-and-set-radio-row-composition-api.vue

@@ -20,6 +20,10 @@ const toolbarButtons = ref([
   {
     code: 'clearRadioRowData',
     name: '手动取消单选行'
+  },
+  {
+    code: 'setRadioRow',
+    name: '手动选中某一行'
   }
 ])
 const tableData = ref([
@@ -66,7 +70,7 @@ const tableData = ref([
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   }
 ])
-const gridRef = ref()
+const gridRef = ref('gridRef')
 
 function toolbarButtonClickEvent({ code }) {
   switch (code) {

package/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue

@@ -20,6 +20,22 @@ const toolbarButtons = ref([
   {
     code: 'clearSelection',
     name: '手动取消多选行'
+  },
+  {
+    code: 'setAllSelection',
+    name: '手动选中所有行'
+  },
+  {
+    code: 'setSelection',
+    name: '手动选中指定行'
+  },
+  {
+    code: 'toggleAllSelection',
+    name: '手动切换所有行选中状态'
+  },
+  {
+    code: 'toggleRowSelection',
+    name: '手动切换指定行选中状态'
   }
 ])
 const tableData = ref([
@@ -73,6 +89,22 @@ function toolbarButtonClickEvent({ code, $grid }) {
       $grid.clearSelection()
       break
     }
+    case 'setAllSelection': {
+      $grid.setAllSelection(true)
+      break
+    }
+    case 'setSelection': {
+      $grid.setSelection(tableData.value[4], true)
+      break
+    }
+    case 'toggleAllSelection': {
+      $grid.toggleAllSelection()
+      break
+    }
+    case 'toggleRowSelection': {
+      $grid.toggleRowSelection(tableData.value[1])
+      break
+    }
   }
 }
 </script>

package/demos/pc/app/grid/size/grid-size-composition-api.vue

@@ -1,4 +1,5 @@
 <template>
+  <p>medium</p>
   <tiny-grid :data="tableData" size="medium">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
@@ -6,6 +7,22 @@
     <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
     <tiny-grid-column field="city" title="城市"></tiny-grid-column>
   </tiny-grid>
+  <p>small</p>
+  <tiny-grid :data="tableData" size="small">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+  </tiny-grid>
+  <p>mini</p>
+  <tiny-grid :data="tableData" size="mini">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+  </tiny-grid>
 </template>
 
 <script setup lang="jsx">

package/demos/pc/app/grid/slot/editor-slot-composition-api.vue

@@ -25,13 +25,15 @@ const tableData = ref([
     name: 'GFD科技YX公司',
     area: '华东区',
     address: '福州',
+    employees: 423,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWWW科技YX公司',
     area: '华南区',
     address: '深圳福田区',
+    employees: 363,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   },
   {
@@ -39,13 +41,15 @@ const tableData = ref([
     name: 'RFV有限责任公司',
     area: '华南区',
     address: '中山市',
+    employees: 131,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
-    area: '华东区',
-    address: '龙岩',
+    name: 'TGBYX公司',
+    area: '华北区',
+    address: '梅州',
+    employees: 215,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   },
   {
@@ -53,13 +57,15 @@ const tableData = ref([
     name: 'YHN科技YX公司',
     area: '华南区',
     address: '韶关',
+    employees: 322,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
-    area: '华中区',
-    address: '黄冈',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    employees: 168,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   }
 ])

package/demos/pc/app/grid/sort/combinations-sort-composition-api.vue

@@ -35,7 +35,7 @@ const tableData = ref([
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'BWW科技YX公司',
     city: '深圳',
     employees: 300,
     createdDate: '2016-07-08 12:36:22'
@@ -58,7 +58,7 @@ const tableData = ref([
     id: '5',
     name: 'YHN科技YX公司',
     city: '韶关',
-    employees: 810,
+    employees: 800,
     createdDate: '2012-12-12 12:12:12'
   },
   {
@@ -77,7 +77,7 @@ const tableData = ref([
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: 'SZ网络技术YX公司',
     city: '厦门',
     employees: 540,
     createdDate: '2016-06-03 13:53:25'

package/demos/pc/app/grid/sort/combinations-sort.spec.js

@@ -4,5 +4,8 @@ test('多字段组合排序', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-sort#sort-combinations-sort')
   await page.getByRole('cell', { name: '员工数(员工数和名称组合排序)' }).getByRole('img').click()
+  // 员工数第一优先级排序
   await expect(page.locator('.tiny-grid-body__row').first()).toContainText('1300')
+  // 公司名称第二优先级排序
+  await expect(page.locator('.tiny-grid-body__row').nth(1)).toContainText('YHN科技YX公司')
 })

package/demos/pc/app/grid/sort/combinations-sort.vue

@@ -41,7 +41,7 @@ export default {
         },
         {
           id: '2',
-          name: 'WWW科技YX公司',
+          name: 'BWW科技YX公司',
           city: '深圳',
           employees: 300,
           createdDate: '2016-07-08 12:36:22'
@@ -64,7 +64,7 @@ export default {
           id: '5',
           name: 'YHN科技YX公司',
           city: '韶关',
-          employees: 810,
+          employees: 800,
           createdDate: '2012-12-12 12:12:12'
         },
         {
@@ -83,7 +83,7 @@ export default {
         },
         {
           id: '8',
-          name: '深圳市福德宝网络技术YX公司',
+          name: 'SZ网络技术YX公司',
           city: '厦门',
           employees: 540,
           createdDate: '2016-06-03 13:53:25'

package/demos/pc/app/grid/toolbar/insert-remove-rows-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-grid ref="insertGridRef" :data="tableData">
+    <tiny-grid ref="insertGrid" :data="tableData">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>

package/demos/pc/app/grid/toolbar/insert-remove-rows.vue

@@ -7,7 +7,7 @@
       <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
       <tiny-grid-column field="city" title="城市"></tiny-grid-column>
       <tiny-grid-column title="操作" width="100">
-        <template v-slot="data">
+        <template #default="data">
           <div style="text-align: left; font-size: 16px">
             <icon-plus class="tiny-svg-size" @click="$refs.insertGrid.insertAt(record, data.row)"></icon-plus
             >&nbsp;&nbsp;

package/demos/pc/app/grid/toolbar/refresh-grid-composition-api.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <tiny-button @click="reLoad">刷新</tiny-button>
+    <tiny-grid ref="grid" :fetch-data="fetchData" :pager="pagerConfig" :loading="loading">
+      <template #toolbar>
+        <tiny-grid-toolbar refresh></tiny-grid-toolbar>
+      </template>
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称"></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Pager, Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+
+const loading = ref(true)
+
+const grid = ref('grid')
+
+const pagerConfig = {
+  component: Pager,
+  attrs: {
+    currentPage: 1,
+    pageSize: 5,
+    pageSizes: [5, 10],
+    total: 0,
+    layout: 'total, prev, pager, next, jumper, sizes'
+  }
+}
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技YX公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWWW科技YX公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '4',
+    name: 'TGBYX公司',
+    area: '华北区',
+    address: '梅州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '5',
+    name: 'YHN科技YX公司',
+    area: '华南区',
+    address: '韶关',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '6',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+
+const getData = ({ page }) => {
+  let curPage = page.currentPage
+  let pageSize = page.pageSize
+  let offset = (curPage - 1) * pageSize
+  loading.value = true
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        result: tableData.value.slice(offset, offset + pageSize),
+        page: { total: tableData.value.length }
+      })
+      loading.value = false
+    }, 1000)
+  })
+}
+const fetchData = {
+  api: getData
+}
+
+const reLoad = () => {
+  grid.value.handleFetch('reload')
+}
+</script>