Merge branch 'docs-vxe-table' of https://github.com/ArthurDarkstone/v…

…ue-vben-admin into docs-vxe-table
vbenjs · Nov 5, 2024 · b9c98d0 · b9c98d0
2 parents 40e11ae + eede2d7
commit b9c98d0
Show file tree

Hide file tree

Showing 84 changed files with 2,146 additions and 2,462 deletions.
diff --git a/apps/backend-mock/nitro.config.ts b/apps/backend-mock/nitro.config.ts
@@ -1,5 +1,6 @@
 import errorHandler from './error';
 
+process.env.COMPATIBILITY_DATE = new Date().toISOString();
 export default defineNitroConfig({
   devErrorHandler: errorHandler,
   errorHandler: '~/error',

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "5.4.3",
+  "version": "5.4.4",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts
@@ -16,6 +16,10 @@ setupVbenVxeTable({
           resizable: true,
         },
         minHeight: 180,
+        formConfig: {
+          // 全局禁用vxe-table的表单配置，使用formOptions
+          enabled: false,
+        },
         proxyConfig: {
           autoLoad: true,
           response: {

diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-ele",
-  "version": "5.4.3",
+  "version": "5.4.4",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

diff --git a/apps/web-ele/src/adapter/vxe-table.ts b/apps/web-ele/src/adapter/vxe-table.ts
@@ -16,6 +16,10 @@ setupVbenVxeTable({
           resizable: true,
         },
         minHeight: 180,
+        formConfig: {
+          // 全局禁用vxe-table的表单配置，使用formOptions
+          enabled: false,
+        },
         proxyConfig: {
           autoLoad: true,
           response: {

diff --git a/apps/web-naive/package.json b/apps/web-naive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-naive",
-  "version": "5.4.3",
+  "version": "5.4.4",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

diff --git a/apps/web-naive/src/adapter/vxe-table.ts b/apps/web-naive/src/adapter/vxe-table.ts
@@ -16,6 +16,10 @@ setupVbenVxeTable({
           resizable: true,
         },
         minHeight: 180,
+        formConfig: {
+          // 全局禁用vxe-table的表单配置，使用formOptions
+          enabled: false,
+        },
         proxyConfig: {
           autoLoad: true,
           response: {

diff --git a/docs/package.json b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/docs",
-  "version": "5.4.3",
+  "version": "5.4.4",
   "private": true,
   "scripts": {
     "build": "vitepress build",

diff --git a/docs/src/_env/adapter/vxe-table.ts b/docs/src/_env/adapter/vxe-table.ts
@@ -2,7 +2,7 @@ import { h } from 'vue';
 
 import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
 
-import { Button } from 'ant-design-vue';
+import { Button, Image } from 'ant-design-vue';
 
 import { useVbenForm } from './form';
 
@@ -32,13 +32,6 @@ setupVbenVxeTable({
       },
     });
 
-    // const { theme } = useData();
-
-    // watch(theme.value, (t: string) => {
-    //   console.log(t);
-    //   // vxeUI.setTheme(t === 'dark' ? 'dark' : 'light');
-    // });
-
     // 表格配置项可以用 cellRender: { name: 'CellImage' },
     vxeUI.renderer.add('CellImage', {
       renderDefault(_renderOpts, params) {

diff --git a/docs/src/components/common-ui/vben-modal.md b/docs/src/components/common-ui/vben-modal.md
@@ -110,12 +110,14 @@ const [Modal, modalApi] = useVbenModal({
 
 以下事件，只有在 `useVbenModal({onCancel:()=>{}})` 中传入才会生效。
 
-| 事件名 | 描述 | 类型 |
-| --- | --- | --- |
-| onBeforeClose | 关闭前触发，返回 `false`则禁止关闭 | `()=>boolean` |
-| onCancel | 点击取消按钮触发 | `()=>void` |
-| onConfirm | 点击确认按钮触发 | `()=>void` |
-| onOpenChange | 关闭或者打开弹窗时触发 | `(isOpen:boolean)=>void` |
+| 事件名 | 描述 | 类型 | 版本号 |
+| --- | --- | --- | --- |
+| onBeforeClose | 关闭前触发，返回 `false`则禁止关闭 | `()=>boolean` |  |
+| onCancel | 点击取消按钮触发 | `()=>void` |  |
+| onClosed | 关闭动画播放完毕时触发 | `()=>void` | >5.4.3 |
+| onConfirm | 点击确认按钮触发 | `()=>void` |  |
+| onOpenChange | 关闭或者打开弹窗时触发 | `(isOpen:boolean)=>void` |  |
+| onOpened | 打开动画播放完毕时触发 | `()=>void` | >5.4.3 |
 
 ### Slots
 

diff --git a/docs/src/components/common-ui/vben-vxe-table.md b/docs/src/components/common-ui/vben-vxe-table.md
@@ -4,42 +4,109 @@ outline: deep
 
 # Vben Vxe Table 表格
 
-框架提供的Table 列表组件基于 [vxe-table](https://xuliangzhan.github.io/vxe-table/)，结合`Vben Form表单`进行了二次封装。
+框架提供的Table 列表组件基于 [vxe-table](https://vxetable.cn/v4/#/grid/api?apiKey=grid)，结合`Vben Form 表单`进行了二次封装。
 
 其中，表头的 **表单搜索** 部分采用了`Vben Form表单`，表格主体部分使用了`vxe-grid`组件，支持表格的分页、排序、筛选等功能。
 
+> 如果文档内没有参数说明，可以尝试在在线示例或者在 [vxe-grid 官方API 文档](https://vxetable.cn/v4/#/grid/api?apiKey=grid) 内寻找
+
+::: info 写在前面
+
+如果你觉得现有组件的封装不够理想，或者不完全符合你的需求，大可以直接使用原生组件，亦或亲手封装一个适合的组件。框架提供的组件并非束缚，使用与否，完全取决于你的需求与自由。
+
+:::
+
+::: tip README
+
+下方示例代码中的，存在一些国际化、主题色未适配问题，这些问题只在文档内会出现，实际使用并不会有这些问题，可忽略，不必纠结。
+
+:::
+
 ## 基础表格
 
+使用 `useVbenVxeGrid` 创建最基础的表格。
+
 <DemoPreview dir="demos/vben-vxe-table/basic" />
 
 ## 远程加载
 
+通过指定 `proxyConfig.ajax` 的 `query` 方法，可以实现远程加载数据。
+
 <DemoPreview dir="demos/vben-vxe-table/remote" />
 
 ## 树形表格
 
+树形表格，的数据源为扁平结构，可以指定`treeConfig`配置项，实现树形表格。
+
+```typescript
+treeConfig: {
+  transform: true, // 指定表格为树形表格
+  parentField: 'parentId', // 父节点字段名
+  rowField: 'id', // 行数据字段名
+},
+```
+
 <DemoPreview dir="demos/vben-vxe-table/tree" />
 
 ## 固定表头/列
 
+列固定可选参数： `'left' | 'right' | '' | null`
+
 <DemoPreview dir="demos/vben-vxe-table/fixed" />
 
 ## 自定义单元格
 
+自定义单元格有两种实现方式
+
+- 通过 `slots` 插槽
+- 通过 `customCell` 自定义单元格，但是要先添加渲染器
+
+```typescript
+// 表格配置项可以用 cellRender: { name: 'CellImage' },
+vxeUI.renderer.add('CellImage', {
+  renderDefault(_renderOpts, params) {
+    const { column, row } = params;
+    return h(Image, { src: row[column.field] } as any); // 注意此处的Image 组件，来源于Antd，需要自行引入,否则会使用js的Image类
+  },
+});
+
+// 表格配置项可以用 cellRender: { name: 'CellLink' },
+vxeUI.renderer.add('CellLink', {
+  renderDefault(renderOpts) {
+    const { props } = renderOpts;
+    return h(
+      Button,
+      { size: 'small', type: 'link' },
+      { default: () => props?.text },
+    );
+  },
+});
+```
+
 <DemoPreview dir="demos/vben-vxe-table/custom-cell" />
 
 ## 搜索表单
 
+**表单搜索** 部分采用了`Vben Form 表单`，参考 [Vben Form 表单文档](/components/common-ui/vben-form)。
+
 <DemoPreview dir="demos/vben-vxe-table/form" />
 
 ## 单元格编辑
 
+通过指定`editConfig.mode`为`cell`，可以实现单元格编辑。
+
 <DemoPreview dir="demos/vben-vxe-table/edit-cell" />
 
 ## 行编辑
 
+通过指定`editConfig.mode`为`row`，可以实现行编辑。
+
 <DemoPreview dir="demos/vben-vxe-table/edit-row" />
 
 ## 虚拟滚动
 
+通过 scroll-y.enabled 与 scroll-y.gt 组合开启，其中 enabled 为总开关，gt 是指当总行数大于指定行数时自动开启。
+
+> 参考 [vxe-table 官方文档 - 虚拟滚动](https://vxetable.cn/v4/#/component/grid/scroll/vertical)。
+
 <DemoPreview dir="demos/vben-vxe-table/virtual" />
diff --git a/docs/src/demos/vben-vxe-table/basic/index.vue b/docs/src/demos/vben-vxe-table/basic/index.vue
@@ -66,8 +66,9 @@ function changeLoading() {
 </script>
 
 <template>
-  <div class="vp-raw flex w-full">
-    <Grid class="w-full">
+  <!-- 此处的`vp-raw` 是为了适配文档的展示效果，实际使用时不需要 -->
+  <div class="vp-raw w-full">
+    <Grid>
       <template #toolbar-tools>
         <Button class="mr-2" type="primary" @click="changeBorder">
           {{ showBorder ? '隐藏' : '显示' }}边框

diff --git a/docs/src/demos/vben-vxe-table/custom-cell/index.vue b/docs/src/demos/vben-vxe-table/custom-cell/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { Button, Image, Switch, Tag } from 'ant-design-vue';
+import { Image as AImage, Button, Switch, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
@@ -68,7 +68,6 @@ const gridOptions: VxeGridProps<RowType> = {
       width: 120,
     },
   ],
-  height: 'auto',
   keepSource: true,
   pagerConfig: {},
   proxyConfig: {
@@ -87,10 +86,10 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
 </script>
 
 <template>
-  <div class="vp-raw h-[600px] w-full">
-    <Grid class="w-full">
+  <div class="vp-raw w-full">
+    <Grid>
       <template #image-url="{ row }">
-        <Image :src="row.imageUrl" height="30" width="30" />
+        <AImage :src="row.imageUrl" height="30" width="30" />
       </template>
       <template #open="{ row }">
         <Switch v-model:checked="row.open" />

diff --git a/docs/src/demos/vben-vxe-table/edit-cell/index.vue b/docs/src/demos/vben-vxe-table/edit-cell/index.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { Page } from '@vben/common-ui';
-
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
 import { getExampleTableApi } from '../mock-api';
@@ -33,7 +31,6 @@ const gridOptions: VxeGridProps<RowType> = {
     mode: 'cell',
     trigger: 'click',
   },
-  height: 'auto',
   pagerConfig: {},
   proxyConfig: {
     ajax: {
@@ -52,7 +49,7 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
 </script>
 
 <template>
-  <Page auto-content-height>
+  <div class="vp-raw w-full">
     <Grid />
-  </Page>
+  </div>
 </template>
diff --git a/docs/src/demos/vben-vxe-table/edit-row/index.vue b/docs/src/demos/vben-vxe-table/edit-row/index.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { Page } from '@vben/common-ui';
-
 import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
@@ -36,7 +34,6 @@ const gridOptions: VxeGridProps<RowType> = {
     mode: 'row',
     trigger: 'click',
   },
-  height: 'auto',
   pagerConfig: {},
   proxyConfig: {
     ajax: {
@@ -79,7 +76,7 @@ const cancelRowEvent = (_row: RowType) => {
 </script>
 
 <template>
-  <Page auto-content-height>
+  <div class="vp-raw w-full">
     <Grid>
       <template #action="{ row }">
         <template v-if="hasEditStatus(row)">
@@ -91,5 +88,5 @@ const cancelRowEvent = (_row: RowType) => {
         </template>
       </template>
     </Grid>
-  </Page>
+  </div>
 </template>
diff --git a/docs/src/demos/vben-vxe-table/fixed/index.vue b/docs/src/demos/vben-vxe-table/fixed/index.vue
@@ -37,7 +37,6 @@ const gridOptions: VxeGridProps<RowType> = {
       width: 120,
     },
   ],
-  height: 'auto',
   pagerConfig: {},
   proxyConfig: {
     ajax: {
@@ -58,8 +57,8 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
 </script>
 
 <template>
-  <div class="vp-raw flex h-[600px] w-full">
-    <Grid class="w-full">
+  <div class="vp-raw w-full">
+    <Grid>
       <template #action>
         <Button type="link">编辑</Button>
       </template>