docs(grid): [grid] add grid custom loading demos and api (#1048)

examples/sites/demos/pc/app/grid/loading/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>

examples/sites/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()
+})

examples/sites/demos/pc/app/grid/loading/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>

examples/sites/demos/pc/app/grid/loading/grid-loading-off-tip.spec.js

@@ -1,8 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('关闭加载中状态', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-loading#loading-grid-loading-off-tip')
-  await page.getByRole('button', { name: '重试' }).click()
-  await expect(page.getByText('暂无数据')).toBeVisible()
-})

examples/sites/demos/pc/app/grid/webdoc/grid-loading.js

@@ -3,19 +3,23 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'loading-grid-loading-off-tip',
-      'name': { 'zh-CN': '关闭加载中状态', 'en-US': 'Disable loading status' },
+      'demoId': 'loading-grid-custom-loading',
+      'name': { 'zh-CN': '自定义表格加载', 'en-US': 'Disable loading status' },
       'desc': {
-        'zh-CN': '<p>表格属性设置 <code>loading</code> 开启或关闭加载状态，默认值为 <code>false</code> 不开启。</p>\n',
+        'zh-CN':
+          '<p>通过表格属性设置 <code>loading</code> 开启或关闭加载状态，默认值为 <code>false</code> 不开启。通过表格属性设置 <code>loadingComponent</code> 可以自定义表格加载中 <code>dom</code> 结构。</p>\n',
         'en-US':
           '<p>Table attribute setting <code>loading</code> Enables or disables loading. The default value is <code>false</code>. </p>\n'
       },
-      'codeFiles': ['loading/grid-loading-off-tip.vue']
+      'codeFiles': ['loading/grid-custom-loading.vue']
     },
     {
       'demoId': 'loading-grid-loading-tip',
       'name': { 'zh-CN': '开启加载中状态', 'en-US': 'Enable loading status' },
-      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过表格属性设置 <code>loading</code> 开启加载状态。',
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['loading/grid-loading-tip.vue']
     }
   ],

examples/sites/demos/pc/app/grid/webdoc/grid.js

@@ -369,7 +369,14 @@ export default {
           'type': 'boolean',
           'defaultValue': 'true',
           'desc': { 'zh-CN': '表格是否显示加载中', 'en-US': 'Whether the table is being loaded.' },
-          'demoId': 'grid-loading#loading-grid-loading-off-tip'
+          'demoId': 'grid-loading#loading-grid-loading-tip'
+        },
+        {
+          'name': 'loading-component',
+          'type': 'VueComponent',
+          'defaultValue': '--',
+          'desc': { 'zh-CN': '自定义表格loading', 'en-US': 'Whether the table is being loaded.' },
+          'demoId': 'grid-loading#grid-custom-loading'
         },
         {
           'name': 'max-height',