From 30fa28321eb36a70dc4ec3ccf8a0503b61d4c51b Mon Sep 17 00:00:00 2001 From: Gimmy <975402925@qq.com> Date: Tue, 17 Jun 2025 16:07:10 +0800 Subject: [PATCH 1/2] feat(grid): add expand trigger slot --- examples/sites/demos/apis/grid.js | 14 +++ ...d-config.spec.js => expand-config.spec.ts} | 0 .../expand-trigger-slot-composition-api.vue | 85 +++++++++++++++++ .../grid/expand/expand-trigger-slot.spec.ts | 11 +++ .../app/grid/expand/expand-trigger-slot.vue | 95 +++++++++++++++++++ .../demos/pc/app/grid/webdoc/grid-expand.js | 11 +++ packages/vue/src/grid/src/cell/src/cell.ts | 7 +- 7 files changed, 221 insertions(+), 2 deletions(-) rename examples/sites/demos/pc/app/grid/expand/{expand-config.spec.js => expand-config.spec.ts} (100%) create mode 100644 examples/sites/demos/pc/app/grid/expand/expand-trigger-slot-composition-api.vue create mode 100644 examples/sites/demos/pc/app/grid/expand/expand-trigger-slot.spec.ts create mode 100644 examples/sites/demos/pc/app/grid/expand/expand-trigger-slot.vue diff --git a/examples/sites/demos/apis/grid.js b/examples/sites/demos/apis/grid.js index edbbadba08..00299e4413 100644 --- a/examples/sites/demos/apis/grid.js +++ b/examples/sites/demos/apis/grid.js @@ -2967,6 +2967,20 @@ export default { mode: ['pc', 'mobile-first'], pcDemo: 'grid-slot#slot-editor-slot' }, + { + name: 'expand-trigger', + defaultValue: '', + meta: { + stable: '3.25.0' + }, + desc: { + 'zh-CN': + '自定义展开行图标，作用插槽参数说明：slots.expand-trigger({ $table, column, row },h)，$table：表格组件对象，column：当前列配置，row：当前行数据,h：vue的渲染函数', + 'en-US': 'Customized expand row icon' + }, + mode: ['pc', 'mobile-first'], + pcDemo: 'grid-expand#expand-trigger-slot' + }, { name: 'filter', defaultValue: '', diff --git a/examples/sites/demos/pc/app/grid/expand/expand-config.spec.js b/examples/sites/demos/pc/app/grid/expand/expand-config.spec.ts similarity index 100% rename from examples/sites/demos/pc/app/grid/expand/expand-config.spec.js rename to examples/sites/demos/pc/app/grid/expand/expand-config.spec.ts diff --git a/examples/sites/demos/pc/app/grid/expand/expand-trigger-slot-composition-api.vue b/examples/sites/demos/pc/app/grid/expand/expand-trigger-slot-composition-api.vue new file mode 100644 index 0000000000..58f5d854d2 --- /dev/null +++ b/examples/sites/demos/pc/app/grid/expand/expand-trigger-slot-composition-api.vue @@ -0,0 +1,85 @@ + + + diff --git a/examples/sites/demos/pc/app/grid/expand/expand-trigger-slot.spec.ts b/examples/sites/demos/pc/app/grid/expand/expand-trigger-slot.spec.ts new file mode 100644 index 0000000000..6fe3200170 --- /dev/null +++ b/examples/sites/demos/pc/app/grid/expand/expand-trigger-slot.spec.ts @@ -0,0 +1,11 @@ +import { test, expect } from '@playwright/test' + +test('检查当前行是否展开', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('grid-expand#expand-trigger-slot') + await page.locator('#expand-trigger-slot .tiny-grid-body__row').locator('.tiny-button').click() + await expect(page.locator('div').filter({ hasText: '当前展开行：1' }).nth(1)).toBeVisible() + await expect(page.locator('.tiny-grid-body__expanded-cell')).toHaveText( + '公司名称：GFD 科技 YX 公司区域：华东区员工数：800公司简介：公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。' + ) +}) diff --git a/examples/sites/demos/pc/app/grid/expand/expand-trigger-slot.vue b/examples/sites/demos/pc/app/grid/expand/expand-trigger-slot.vue new file mode 100644 index 0000000000..2c24ad277f --- /dev/null +++ b/examples/sites/demos/pc/app/grid/expand/expand-trigger-slot.vue @@ -0,0 +1,95 @@ + + + diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-expand.js b/examples/sites/demos/pc/app/grid/webdoc/grid-expand.js index db909506ad..1a39fc46e0 100644 --- a/examples/sites/demos/pc/app/grid/webdoc/grid-expand.js +++ b/examples/sites/demos/pc/app/grid/webdoc/grid-expand.js @@ -15,6 +15,17 @@ export default { }, codeFiles: ['expand/has-row-expand.vue'] }, + { + demoId: 'expand-trigger-slot', + name: { 'zh-CN': '展开行触发器插槽', 'en-US': 'Expand row trigger slot' }, + desc: { + 'zh-CN': ` +

通过 expand-trigger 插槽可以自定义展开行图标。

+ `, + 'en-US': '

You can customize the expand row icon through the expand-trigger slot.

\n' + }, + codeFiles: ['expand/expand-trigger-slot.vue'] + }, { demoId: 'expand-expand-config', name: { 'zh-CN': '展开行配置项', 'en-US': 'Basic Usage' }, diff --git a/packages/vue/src/grid/src/cell/src/cell.ts b/packages/vue/src/grid/src/cell/src/cell.ts index ccf1809d7d..5506b66d59 100644 --- a/packages/vue/src/grid/src/cell/src/cell.ts +++ b/packages/vue/src/grid/src/cell/src/cell.ts @@ -652,7 +652,7 @@ export const Cell = { }, // 展开行 renderExpandCell(h, params) { - let { $table, row } = params + let { $table, row, column } = params let { expandConfig = {} } = $table let { showIcon = true, activeMethod: expandMethod } = expandConfig let hideExpand = typeof expandMethod === 'function' ? expandMethod(row) : true @@ -661,6 +661,9 @@ export const Cell = { if (!showIcon) return null + const expandTrigger = column.slots?.['expand-trigger'] + const triggerContent = expandTrigger ? expandTrigger(params, h) : h('i', { class: 'tiny-grid__expand-icon' }) + const map = { expandActive: 'expand__active' } @@ -684,7 +687,7 @@ export const Cell = { } } }, - [hideExpand && h('i', { class: 'tiny-grid__expand-icon' })] + [hideExpand && triggerContent] ) ] }, From d514a0b361318353434727077c107489ac4fc7ce Mon Sep 17 00:00:00 2001 From: Gimmy <975402925@qq.com> Date: Tue, 17 Jun 2025 16:10:02 +0800 Subject: [PATCH 2/2] docs(grid): optimize grid docs --- examples/sites/demos/apis/grid.js | 42 ++++++++++++++++--- .../grid/expand/expand-trigger-slot.spec.ts | 2 +- 2 files changed, 37 insertions(+), 7 deletions(-) diff --git a/examples/sites/demos/apis/grid.js b/examples/sites/demos/apis/grid.js index 00299e4413..f738e134c8 100644 --- a/examples/sites/demos/apis/grid.js +++ b/examples/sites/demos/apis/grid.js @@ -57,8 +57,8 @@ export default { }, { name: 'cell-class-name', - typeAnchorName: 'IClassNameArgs', - type: 'string | (args: IClassNameArgs) => string', + typeAnchorName: 'ICellClassNameArgs', + type: 'string | (args: ICellClassNameArgs) => string', defaultValue: '', desc: { 'zh-CN': '给单元格附加 className，也可以是函数', @@ -3208,18 +3208,24 @@ interface IRow { depTypes: ['IValidRules'], code: ` interface IColumnConfig { - type: 'index' | 'radio' | 'checkbox' + // 功能列的类型， 'index'行索引，'radio' 单选行， 'selection' 多选行 + type: 'index' | 'radio' | 'selection' + // 列id id: string - prop: string + // 校验规则 rules: IValidRules + // 是否必填 required: boolean property: string title: string - label: string + // 列宽度 width: string | number + // 自动分配宽度时的最小宽度 minWidth: string | number + // 是否可以调整列宽 resizable: boolean - fixed: boolean + // 是否左、右冻结 + fixed: 'left' | 'right' align: 'left' | 'center' | 'right' headerAlign: 'left' | 'center' | 'right' footerAlign: 'left' | 'center' | 'right' @@ -4167,6 +4173,30 @@ interface IFilterConfig { sortable?: Sortable } ` + }, + { + name: 'ICellClassNameArgs', + type: 'type', + depTypes: ['IColumnConfig', 'IRow'], + code: ` +interface ICellClassNameArgs { + seq: number + // 当前行在树表中的层级 + level: number + // 当前行数据 + row: IRow + // 表格数据 + data: IRow[] + // 表格行索引 + rowIndex: number + $rowIndex: number + // 表格列配置 + column: IColumnConfig + // 所有列中(包含隐藏列)索引 + columnIndex: number + // 已渲染列中的索引 + $columnIndex: number +}` } ] } diff --git a/examples/sites/demos/pc/app/grid/expand/expand-trigger-slot.spec.ts b/examples/sites/demos/pc/app/grid/expand/expand-trigger-slot.spec.ts index 6fe3200170..4a139e54ee 100644 --- a/examples/sites/demos/pc/app/grid/expand/expand-trigger-slot.spec.ts +++ b/examples/sites/demos/pc/app/grid/expand/expand-trigger-slot.spec.ts @@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test' test('检查当前行是否展开', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('grid-expand#expand-trigger-slot') - await page.locator('#expand-trigger-slot .tiny-grid-body__row').locator('.tiny-button').click() + await page.locator('#expand-trigger-slot .tiny-grid-body__row').first().locator('.tiny-button').click() await expect(page.locator('div').filter({ hasText: '当前展开行：1' }).nth(1)).toBeVisible() await expect(page.locator('.tiny-grid-body__expanded-cell')).toHaveText( '公司名称：GFD 科技 YX 公司区域：华东区员工数：800公司简介：公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'