From ea962e75d059ba1bc8fc932bd4393d242bf36b06 Mon Sep 17 00:00:00 2001 From: vben Date: Sun, 13 Oct 2024 23:44:45 +0800 Subject: [PATCH] fix: table search form slot not working as expected --- .../src/components/common-ui/vben-vxe-table.md | 2 +- .../effects/plugins/src/vxe-table/extends.ts | 18 +++++++++++++++++- .../effects/plugins/src/vxe-table/formatter.ts | 17 ----------------- packages/effects/plugins/src/vxe-table/init.ts | 5 +++-- .../plugins/src/vxe-table/use-vxe-grid.vue | 7 +++++-- .../src/views/examples/vxe-table/form.vue | 4 +++- .../src/views/examples/vxe-table/tree.vue | 3 +++ .../src/views/examples/vxe-table/virtual.vue | 3 +++ pnpm-lock.yaml | 16 ++++++++-------- pnpm-workspace.yaml | 2 +- 10 files changed, 44 insertions(+), 33 deletions(-) delete mode 100644 packages/effects/plugins/src/vxe-table/formatter.ts diff --git a/docs/src/components/common-ui/vben-vxe-table.md b/docs/src/components/common-ui/vben-vxe-table.md index e6f6a8f0..a80ef585 100644 --- a/docs/src/components/common-ui/vben-vxe-table.md +++ b/docs/src/components/common-ui/vben-vxe-table.md @@ -4,4 +4,4 @@ outline: deep # Vben Vxe Table 表格 -TODO +文档待补充，如果需要使用，可先行查看 vxe-table 文档和 示例代码，内部有部分注释。 diff --git a/packages/effects/plugins/src/vxe-table/extends.ts b/packages/effects/plugins/src/vxe-table/extends.ts index 3055c1f0..f5d91fcb 100644 --- a/packages/effects/plugins/src/vxe-table/extends.ts +++ b/packages/effects/plugins/src/vxe-table/extends.ts @@ -1,9 +1,11 @@ -import type { VxeGridProps } from 'vxe-table'; +import type { VxeGridProps, VxeUIExport } from 'vxe-table'; import type { VxeGridApi } from './api'; import { isFunction } from '@vben/utils'; +import dayjs from 'dayjs'; + export function extendProxyOptions( api: VxeGridApi, options: VxeGridProps, @@ -48,3 +50,17 @@ function extendProxyOption( }, }); } + +export function extendsDefaultFormatter(vxeUI: VxeUIExport) { + vxeUI.formats.add('formatDate', { + tableCellFormatMethod({ cellValue }) { + return dayjs(cellValue).format('YYYY-MM-DD'); + }, + }); + + vxeUI.formats.add('formatDateTime', { + tableCellFormatMethod({ cellValue }) { + return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss'); + }, + }); +} diff --git a/packages/effects/plugins/src/vxe-table/formatter.ts b/packages/effects/plugins/src/vxe-table/formatter.ts deleted file mode 100644 index e2b3ae4c..00000000 --- a/packages/effects/plugins/src/vxe-table/formatter.ts +++ /dev/null @@ -1,17 +0,0 @@ -import type { VxeUIExport } from 'vxe-table'; - -import dayjs from 'dayjs'; - -export function initDefaultFormatter(vxeUI: VxeUIExport) { - vxeUI.formats.add('formatDate', { - tableCellFormatMethod({ cellValue }) { - return dayjs(cellValue).format('YYYY-MM-DD'); - }, - }); - - vxeUI.formats.add('formatDateTime', { - tableCellFormatMethod({ cellValue }) { - return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss'); - }, - }); -} diff --git a/packages/effects/plugins/src/vxe-table/init.ts b/packages/effects/plugins/src/vxe-table/init.ts index 78d13d19..d6728b17 100644 --- a/packages/effects/plugins/src/vxe-table/init.ts +++ b/packages/effects/plugins/src/vxe-table/init.ts @@ -41,7 +41,7 @@ import { VxeToolbar, } from 'vxe-table'; -import { initDefaultFormatter } from './formatter'; +import { extendsDefaultFormatter } from './extends'; // 是否加载过 let isInit = false; @@ -120,6 +120,7 @@ export function setupVbenVxeTable(setupOptions: SetupVxeTable) { }, ); - initDefaultFormatter(VxeUI); + extendsDefaultFormatter(VxeUI); + configVxeTable(VxeUI); } diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue index 239eb7bc..cedb4422 100644 --- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue +++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue @@ -204,7 +204,7 @@ async function init() { '[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props', ); } - + props.api?.setState?.({ gridOptions: defaultGridOptions }); // form 由 vben-form 代替，所以需要保证query相关事件可以拿到参数 extendProxyOptions(props.api, defaultGridOptions, () => formApi.form.values); } @@ -267,7 +267,10 @@ onMounted(() => { :key="slotName" #[slotName]="slotProps" > - + diff --git a/playground/src/views/examples/vxe-table/form.vue b/playground/src/views/examples/vxe-table/form.vue index 238523fc..30dd328f 100644 --- a/playground/src/views/examples/vxe-table/form.vue +++ b/playground/src/views/examples/vxe-table/form.vue @@ -18,10 +18,12 @@ interface RowType { } const formOptions: VbenFormProps = { - collapsed: true, + // 默认展开 + collapsed: false, schema: [ { component: 'Input', + defaultValue: '1', fieldName: 'category', label: 'Category', }, diff --git a/playground/src/views/examples/vxe-table/tree.vue b/playground/src/views/examples/vxe-table/tree.vue index f7f4efb8..a1afec84 100644 --- a/playground/src/views/examples/vxe-table/tree.vue +++ b/playground/src/views/examples/vxe-table/tree.vue @@ -27,6 +27,9 @@ const gridOptions: VxeGridProps = { { field: 'date', title: 'Date' }, ], data: MOCK_TREE_TABLE_DATA, + pagerConfig: { + enabled: false, + }, treeConfig: { parentField: 'parentId', rowField: 'id', diff --git a/playground/src/views/examples/vxe-table/virtual.vue b/playground/src/views/examples/vxe-table/virtual.vue index 87407562..0b5b5324 100644 --- a/playground/src/views/examples/vxe-table/virtual.vue +++ b/playground/src/views/examples/vxe-table/virtual.vue @@ -23,6 +23,9 @@ const gridOptions: VxeGridProps = { ], data: [], height: 'auto', + pagerConfig: { + enabled: false, + }, scrollY: { enabled: true, gt: 0, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 75ed22e9..b7beda29 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -457,8 +457,8 @@ catalogs: specifier: ^7.4.6 version: 7.4.6 vitepress: - specifier: ^1.4.0 - version: 1.4.0 + specifier: ^1.4.1 + version: 1.4.1 vitepress-plugin-group-icons: specifier: ^1.2.4 version: 1.2.4 @@ -853,7 +853,7 @@ importers: version: 0.5.3(vite-plugin-pwa@0.20.5(vite@5.4.8(@types/node@22.7.5)(less@4.2.0)(sass@1.79.5)(terser@5.34.1))(workbox-build@7.1.1)(workbox-window@7.1.0)) vitepress: specifier: 'catalog:' - version: 1.4.0(@algolia/client-search@4.24.0)(@types/node@22.7.5)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.34.1)(typescript@5.6.3) + version: 1.4.1(@algolia/client-search@4.24.0)(@types/node@22.7.5)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.34.1)(typescript@5.6.3) vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) @@ -10094,8 +10094,8 @@ packages: vitepress-plugin-group-icons@1.2.4: resolution: {integrity: sha512-pxYzphvRy0Jhpgl3lHszH9Z8Qaj83v4bVr0b8Oi4zSIOQW/uuqGAZ8SaYwkZ1f/8a6ckIeIwZiLfLHA6ySCScQ==} - vitepress@1.4.0: - resolution: {integrity: sha512-JXCv4EsKTDyAFb6C/UjZr7nsGAzZ6mafVk2rx7rG5o8N+B/4QstIk+iEOe/9dKoU6V624UIC6g1pZ+K63rxhlw==} + vitepress@1.4.1: + resolution: {integrity: sha512-C2rQ7PMlDVqgsaHOa0uJtgGGWaGv74QMaGL62lxKbtFkYtosJB5HAfZ8+pEbfzzvLemYaYwaiQdFLBlexK2sFw==} hasBin: true peerDependencies: markdown-it-mathjax3: ^4 @@ -12772,7 +12772,7 @@ snapshots: dependencies: '@iconify-json/octicon': 1.2.1 less: 4.2.0 - vitepress: 1.4.0(@algolia/client-search@4.24.0)(@types/node@22.7.5)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.34.1)(typescript@5.6.3) + vitepress: 1.4.1(@algolia/client-search@4.24.0)(@types/node@22.7.5)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.34.1)(typescript@5.6.3) vue: 3.5.12(typescript@5.6.3) transitivePeerDependencies: - '@algolia/client-search' @@ -12816,7 +12816,7 @@ snapshots: gray-matter: 4.0.3 less: 4.2.0 uncrypto: 0.1.3 - vitepress: 1.4.0(@algolia/client-search@4.24.0)(@types/node@22.7.5)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.34.1)(typescript@5.6.3) + vitepress: 1.4.1(@algolia/client-search@4.24.0)(@types/node@22.7.5)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.34.1)(typescript@5.6.3) transitivePeerDependencies: - '@algolia/client-search' - '@types/node' @@ -19617,7 +19617,7 @@ snapshots: transitivePeerDependencies: - supports-color - vitepress@1.4.0(@algolia/client-search@4.24.0)(@types/node@22.7.5)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.34.1)(typescript@5.6.3): + vitepress@1.4.1(@algolia/client-search@4.24.0)(@types/node@22.7.5)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.34.1)(typescript@5.6.3): dependencies: '@docsearch/css': 3.6.2 '@docsearch/js': 3.6.2(@algolia/client-search@4.24.0)(search-insights@2.17.2) diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 747ab213..cb3bd498 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -166,7 +166,7 @@ catalog: vite-plugin-lib-inject-css: ^2.1.1 vite-plugin-pwa: ^0.20.5 vite-plugin-vue-devtools: ^7.4.6 - vitepress: ^1.4.0 + vitepress: ^1.4.1 vitepress-plugin-group-icons: ^1.2.4 vitest: ^2.1.2 vue: ^3.5.12