Browse Source

fix: table search form slot not working as expected

vben 5 months ago
parent
commit
ea962e75d0

+ 1 - 1
docs/src/components/common-ui/vben-vxe-table.md

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

+ 17 - 1
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');
+    },
+  });
+}

+ 0 - 17
packages/effects/plugins/src/vxe-table/formatter.ts

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

+ 3 - 2
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);
 }

+ 5 - 2
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"
               >
-                <slot :name="slotName" v-bind="slotProps"></slot>
+                <slot
+                  :name="`${FORM_SLOT_PREFIX}${slotName}`"
+                  v-bind="slotProps"
+                ></slot>
               </template>
             </Form>
           </slot>

+ 3 - 1
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',
     },

+ 3 - 0
playground/src/views/examples/vxe-table/tree.vue

@@ -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 - 0
playground/src/views/examples/vxe-table/virtual.vue

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

+ 8 - 8
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)

+ 1 - 1
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