From 0979b800f7479a72a797f849761d39cf4be685b0 Mon Sep 17 00:00:00 2001 From: ajaxzheng <894103554@qq.com> Date: Fri, 8 Dec 2023 16:35:47 +0800 Subject: [PATCH] docs(grid): [grid] add grid custom loading demos and api (#1048) --- ...> grid-custom-loading-composition-api.vue} | 33 ++++++++++++++++--- .../grid/loading/grid-custom-loading.spec.js | 7 ++++ ...ng-off-tip.vue => grid-custom-loading.vue} | 28 +++++++++++++++- .../grid/loading/grid-loading-off-tip.spec.js | 8 ----- .../demos/pc/app/grid/webdoc/grid-loading.js | 14 +++++--- .../sites/demos/pc/app/grid/webdoc/grid.js | 9 ++++- 6 files changed, 80 insertions(+), 19 deletions(-) rename examples/sites/demos/pc/app/grid/loading/{grid-loading-off-tip-composition-api.vue => grid-custom-loading-composition-api.vue} (68%) create mode 100644 examples/sites/demos/pc/app/grid/loading/grid-custom-loading.spec.js rename examples/sites/demos/pc/app/grid/loading/{grid-loading-off-tip.vue => grid-custom-loading.vue} (71%) delete mode 100644 examples/sites/demos/pc/app/grid/loading/grid-loading-off-tip.spec.js diff --git a/examples/sites/demos/pc/app/grid/loading/grid-loading-off-tip-composition-api.vue b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue similarity index 68% rename from examples/sites/demos/pc/app/grid/loading/grid-loading-off-tip-composition-api.vue rename to examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue index 52979da6b..81d094d16 100644 --- a/examples/sites/demos/pc/app/grid/loading/grid-loading-off-tip-composition-api.vue +++ b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue @@ -2,7 +2,7 @@
重试

- + @@ -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 = () => ( +
+ 正在加载中。。。 +
+) + + diff --git a/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.spec.js b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.spec.js new file mode 100644 index 000000000..11c17e982 --- /dev/null +++ b/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() +}) diff --git a/examples/sites/demos/pc/app/grid/loading/grid-loading-off-tip.vue b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue similarity index 71% rename from examples/sites/demos/pc/app/grid/loading/grid-loading-off-tip.vue rename to examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue index db8a80832..9fad9a221 100644 --- a/examples/sites/demos/pc/app/grid/loading/grid-loading-off-tip.vue +++ b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue @@ -2,7 +2,7 @@
重试

- + @@ -29,6 +29,13 @@ export default { this.init() }, methods: { + loadingComponent() { + return ( +
+ 正在加载中。。。 +
+ ) + }, init() { this.tableData = [] this.loading = true @@ -66,3 +73,22 @@ export default { } } + + diff --git a/examples/sites/demos/pc/app/grid/loading/grid-loading-off-tip.spec.js b/examples/sites/demos/pc/app/grid/loading/grid-loading-off-tip.spec.js deleted file mode 100644 index c507439c8..000000000 --- a/examples/sites/demos/pc/app/grid/loading/grid-loading-off-tip.spec.js +++ /dev/null @@ -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() -}) diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-loading.js b/examples/sites/demos/pc/app/grid/webdoc/grid-loading.js index ffd97f290..ca646f6e0 100644 --- a/examples/sites/demos/pc/app/grid/webdoc/grid-loading.js +++ b/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': '

表格属性设置 loading 开启或关闭加载状态，默认值为 false 不开启。

\n', + 'zh-CN': + '

通过表格属性设置 loading 开启或关闭加载状态，默认值为 false 不开启。通过表格属性设置 loadingComponent 可以自定义表格加载中 dom 结构。

\n', 'en-US': '

Table attribute setting loading Enables or disables loading. The default value is false.

\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': '通过表格属性设置 loading 开启加载状态。', + 'en-US': 'For details, see the following example.' + }, 'codeFiles': ['loading/grid-loading-tip.vue'] } ], diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid.js b/examples/sites/demos/pc/app/grid/webdoc/grid.js index 59af540f4..424ee5b4d 100644 --- a/examples/sites/demos/pc/app/grid/webdoc/grid.js +++ b/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',