yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/src/components/common-ui/vben-vxe-table.md
View File

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

18
packages/effects/plugins/src/vxe-table/extends.ts
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 { 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');
},
});
}

17
packages/effects/plugins/src/vxe-table/formatter.ts
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');
},
});
}

5
packages/effects/plugins/src/vxe-table/init.ts
View File

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

7
packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
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',
);
}
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"
>
<slot :name="slotName" v-bind="slotProps"></slot>
<slot
:name="`${FORM_SLOT_PREFIX}${slotName}`"
v-bind="slotProps"
></slot>
</template>
</Form>
</slot>

4
playground/src/views/examples/vxe-table/form.vue
View File

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

3
playground/src/views/examples/vxe-table/tree.vue
View File

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

3
playground/src/views/examples/vxe-table/virtual.vue
View File

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

16
pnpm-lock.yaml
View File

@ -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)

2
pnpm-workspace.yaml
View File

@ -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