From 5290ed5cdcb4d76d7394b32615b2461324ccb4c1 Mon Sep 17 00:00:00 2001
From: gimmyhehe <975402925@qq.com>
Date: Wed, 10 Sep 2025 10:51:28 +0800
Subject: [PATCH] docs(grid): add grid customs doc and demo
---
examples/sites/demos/apis/grid.js | 26 +++++++
.../default-customs-composition-api.vue | 66 ++++++++++++++++
.../app/grid/custom/default-customs.spec.ts | 9 +++
.../pc/app/grid/custom/default-customs.vue | 75 +++++++++++++++++++
.../demos/pc/app/grid/webdoc/grid-custom.js | 11 +++
.../demos/pc/app/grid/webdoc/grid-editor.js | 4 +-
6 files changed, 189 insertions(+), 2 deletions(-)
create mode 100644 examples/sites/demos/pc/app/grid/custom/default-customs-composition-api.vue
create mode 100644 examples/sites/demos/pc/app/grid/custom/default-customs.spec.ts
create mode 100644 examples/sites/demos/pc/app/grid/custom/default-customs.vue
diff --git a/examples/sites/demos/apis/grid.js b/examples/sites/demos/apis/grid.js
index f1b60b399c..1856024f71 100644
--- a/examples/sites/demos/apis/grid.js
+++ b/examples/sites/demos/apis/grid.js
@@ -159,6 +159,19 @@ export default {
mode: ['pc', 'mobile-first'],
pcDemo: 'grid-faq#custom-column'
},
+ {
+ name: 'customs',
+ typeAnchorName: 'ICustomConfig',
+ type: 'ICustomConfig[]',
+ defaultValue: '',
+ desc: {
+ 'zh-CN': '表格的初始化个性配置，可以控制表格列是否隐藏，设置列宽。优先级高于grid-column上的配置。',
+ 'en-US':
+ 'Initialize the table personalized configuration to control whether the table columns are hidden and set the column width. It takes precedence over the configuration on grid-column.'
+ },
+ mode: ['pc', 'mobile-first'],
+ pcDemo: 'grid-faq#custom-column'
+ },
{
name: 'data',
typeAnchorName: 'IRow',
@@ -4212,6 +4225,19 @@ interface ICellClassNameArgs {
// 单元格所在行的序号
seq: number
$seq: string // 已弃用
+}`
+ },
+ {
+ name: 'ICustomConfig',
+ type: 'type',
+ code: `
+interface ICustomConfig {
+ // 表格列字段
+ property: string
+ // 是否显示
+ visible?: boolean
+ // 列宽
+ width?: number | string
}`
}
]
diff --git a/examples/sites/demos/pc/app/grid/custom/default-customs-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/default-customs-composition-api.vue
new file mode 100644
index 0000000000..d990b18de9
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/custom/default-customs-composition-api.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/grid/custom/default-customs.spec.ts b/examples/sites/demos/pc/app/grid/custom/default-customs.spec.ts
new file mode 100644
index 0000000000..b4a94a4b74
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/custom/default-customs.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('初始化个性配置', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('grid-custom#custom-default-csutoms')
+ const demo = page.locator('#custom-default-csutoms')
+ await expect(demo.getByRole('cell', { name: '名称' })).not.toBeVisible()
+ await expect(page.getByRole('cell', { name: '员工数' })).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/grid/custom/default-customs.vue b/examples/sites/demos/pc/app/grid/custom/default-customs.vue
new file mode 100644
index 0000000000..ca63c307f7
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/custom/default-customs.vue
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-custom.js b/examples/sites/demos/pc/app/grid/webdoc/grid-custom.js
index 22f616cbe8..def8d91e2e 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-custom.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-custom.js
@@ -13,6 +13,17 @@ export default {
},
codeFiles: ['custom/column-width.vue']
},
+ {
+ demoId: 'custom-default-csutoms',
+ name: { 'zh-CN': '初始化个性配置', 'en-US': 'Initialize personal configuration' },
+ desc: {
+ 'zh-CN':
+ '在 grid 标签上配置 customs 可以设置表格的初始化个性配置，可以控制表格列的隐藏，列宽等。
\n',
+ 'en-US':
+ 'Configure resizable="true" on the grid tag to adjust the column width, and configure resizable="{storage: true}" on the toolbar tag to save the column width in localStorage on the local host. The column width of the table on the refreshed page is displayed based on the column width after being dragged.
\n'
+ },
+ codeFiles: ['custom/default-customs.vue']
+ },
{
demoId: 'custom-column-simple',
name: { 'zh-CN': '简化版列设置', 'en-US': 'Manually Reset Columns' },
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js b/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js
index 64cea58469..d06f2a4f1c 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js
@@ -7,7 +7,7 @@ export default {
name: { 'zh-CN': '内置编辑器', 'en-US': 'Grid-editor-built-in editor' },
desc: {
'zh-CN': `
- 通过在 grid 标签上配置 edit-config。在 grid-column 列配置 editor 对象， component 渲染内置编辑组件， events 配置组件事件。
+ 通过在 grid 标签上配置 edit-config。在 grid-column 列配置 editor 对象， component 渲染内置编辑组件，attrs配置组件的属性， events 配置组件事件。
特别说明：
内置编辑器只支持 Input 和 Select 组件且均为浏览器原生组件并非 TinyVue 组件，需要使用其他组件可参考自定义编辑器。
@@ -23,7 +23,7 @@ export default {
name: { 'zh-CN': '自定义编辑器', 'en-US': 'Introducing the TINY component as the editor' },
desc: {
'zh-CN': `
-
grid 标签上配置 edit-config。\n在 grid-column 列配置 editor 对象， component 渲染自定义编辑组件或者 TinyVue 提供的组件。
+
grid 标签上配置 edit-config。\n在 grid-column 列配置 editor 对象， component 渲染自定义编辑组件或者 TinyVue 提供的组件。attrs配置组件的属性， events 配置组件事件。
`,
'en-US':
'
Introduces the TinyVue Select component through attribute configuration.
\n'