fix: table search form slot not working as expected

pull/48/MERGE
vben 2024-10-13 23:44:45 +08:00
parent 24d14c2841
commit ea962e75d0
10 changed files with 44 additions and 33 deletions

View File

@ -4,4 +4,4 @@ outline: deep
# Vben Vxe Table 表格 # Vben Vxe Table 表格
TODO 文档待补充,如果需要使用,可先行查看 vxe-table 文档和 示例代码,内部有部分注释。

View File

@ -1,9 +1,11 @@
import type { VxeGridProps } from 'vxe-table'; import type { VxeGridProps, VxeUIExport } from 'vxe-table';
import type { VxeGridApi } from './api'; import type { VxeGridApi } from './api';
import { isFunction } from '@vben/utils'; import { isFunction } from '@vben/utils';
import dayjs from 'dayjs';
export function extendProxyOptions( export function extendProxyOptions(
api: VxeGridApi, api: VxeGridApi,
options: VxeGridProps, 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');
},
});
}

View File

@ -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');
},
});
}

View File

@ -41,7 +41,7 @@ import {
VxeToolbar, VxeToolbar,
} from 'vxe-table'; } from 'vxe-table';
import { initDefaultFormatter } from './formatter'; import { extendsDefaultFormatter } from './extends';
// 是否加载过 // 是否加载过
let isInit = false; let isInit = false;
@ -120,6 +120,7 @@ export function setupVbenVxeTable(setupOptions: SetupVxeTable) {
}, },
); );
initDefaultFormatter(VxeUI); extendsDefaultFormatter(VxeUI);
configVxeTable(VxeUI); configVxeTable(VxeUI);
} }

View File

@ -204,7 +204,7 @@ async function init() {
'[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props', '[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 // form vben-form query
extendProxyOptions(props.api, defaultGridOptions, () => formApi.form.values); extendProxyOptions(props.api, defaultGridOptions, () => formApi.form.values);
} }
@ -267,7 +267,10 @@ onMounted(() => {
:key="slotName" :key="slotName"
#[slotName]="slotProps" #[slotName]="slotProps"
> >
<slot :name="slotName" v-bind="slotProps"></slot> <slot
:name="`${FORM_SLOT_PREFIX}${slotName}`"
v-bind="slotProps"
></slot>
</template> </template>
</Form> </Form>
</slot> </slot>

View File

@ -18,10 +18,12 @@ interface RowType {
} }
const formOptions: VbenFormProps = { const formOptions: VbenFormProps = {
collapsed: true, //
collapsed: false,
schema: [ schema: [
{ {
component: 'Input', component: 'Input',
defaultValue: '1',
fieldName: 'category', fieldName: 'category',
label: 'Category', label: 'Category',
}, },

View File

@ -27,6 +27,9 @@ const gridOptions: VxeGridProps<RowType> = {
{ field: 'date', title: 'Date' }, { field: 'date', title: 'Date' },
], ],
data: MOCK_TREE_TABLE_DATA, data: MOCK_TREE_TABLE_DATA,
pagerConfig: {
enabled: false,
},
treeConfig: { treeConfig: {
parentField: 'parentId', parentField: 'parentId',
rowField: 'id', rowField: 'id',

View File

@ -23,6 +23,9 @@ const gridOptions: VxeGridProps<RowType> = {
], ],
data: [], data: [],
height: 'auto', height: 'auto',
pagerConfig: {
enabled: false,
},
scrollY: { scrollY: {
enabled: true, enabled: true,
gt: 0, gt: 0,

View File

@ -457,8 +457,8 @@ catalogs:
specifier: ^7.4.6 specifier: ^7.4.6
version: 7.4.6 version: 7.4.6
vitepress: vitepress:
specifier: ^1.4.0 specifier: ^1.4.1
version: 1.4.0 version: 1.4.1
vitepress-plugin-group-icons: vitepress-plugin-group-icons:
specifier: ^1.2.4 specifier: ^1.2.4
version: 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)) 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: vitepress:
specifier: 'catalog:' 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: vue:
specifier: ^3.5.12 specifier: ^3.5.12
version: 3.5.12(typescript@5.6.3) version: 3.5.12(typescript@5.6.3)
@ -10094,8 +10094,8 @@ packages:
vitepress-plugin-group-icons@1.2.4: vitepress-plugin-group-icons@1.2.4:
resolution: {integrity: sha512-pxYzphvRy0Jhpgl3lHszH9Z8Qaj83v4bVr0b8Oi4zSIOQW/uuqGAZ8SaYwkZ1f/8a6ckIeIwZiLfLHA6ySCScQ==} resolution: {integrity: sha512-pxYzphvRy0Jhpgl3lHszH9Z8Qaj83v4bVr0b8Oi4zSIOQW/uuqGAZ8SaYwkZ1f/8a6ckIeIwZiLfLHA6ySCScQ==}
vitepress@1.4.0: vitepress@1.4.1:
resolution: {integrity: sha512-JXCv4EsKTDyAFb6C/UjZr7nsGAzZ6mafVk2rx7rG5o8N+B/4QstIk+iEOe/9dKoU6V624UIC6g1pZ+K63rxhlw==} resolution: {integrity: sha512-C2rQ7PMlDVqgsaHOa0uJtgGGWaGv74QMaGL62lxKbtFkYtosJB5HAfZ8+pEbfzzvLemYaYwaiQdFLBlexK2sFw==}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
markdown-it-mathjax3: ^4 markdown-it-mathjax3: ^4
@ -12772,7 +12772,7 @@ snapshots:
dependencies: dependencies:
'@iconify-json/octicon': 1.2.1 '@iconify-json/octicon': 1.2.1
less: 4.2.0 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) vue: 3.5.12(typescript@5.6.3)
transitivePeerDependencies: transitivePeerDependencies:
- '@algolia/client-search' - '@algolia/client-search'
@ -12816,7 +12816,7 @@ snapshots:
gray-matter: 4.0.3 gray-matter: 4.0.3
less: 4.2.0 less: 4.2.0
uncrypto: 0.1.3 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: transitivePeerDependencies:
- '@algolia/client-search' - '@algolia/client-search'
- '@types/node' - '@types/node'
@ -19617,7 +19617,7 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - 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: dependencies:
'@docsearch/css': 3.6.2 '@docsearch/css': 3.6.2
'@docsearch/js': 3.6.2(@algolia/client-search@4.24.0)(search-insights@2.17.2) '@docsearch/js': 3.6.2(@algolia/client-search@4.24.0)(search-insights@2.17.2)

View File

@ -166,7 +166,7 @@ catalog:
vite-plugin-lib-inject-css: ^2.1.1 vite-plugin-lib-inject-css: ^2.1.1
vite-plugin-pwa: ^0.20.5 vite-plugin-pwa: ^0.20.5
vite-plugin-vue-devtools: ^7.4.6 vite-plugin-vue-devtools: ^7.4.6
vitepress: ^1.4.0 vitepress: ^1.4.1
vitepress-plugin-group-icons: ^1.2.4 vitepress-plugin-group-icons: ^1.2.4
vitest: ^2.1.2 vitest: ^2.1.2
vue: ^3.5.12 vue: ^3.5.12