docs: add vxe-table demo desc

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

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" />

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 ? '隐藏' : '显示' }}边框

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" />

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>

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>

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>

docs/src/demos/vben-vxe-table/form/index.vue

@@ -2,8 +2,6 @@
 import type { VbenFormProps } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { Page } from '@vben/common-ui';
-
 import { message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
@@ -25,17 +23,26 @@ const formOptions: VbenFormProps = {
   schema: [
     {
       component: 'Input',
+      componentProps: {
+        placeholder: 'Please enter category',
+      },
       defaultValue: '1',
       fieldName: 'category',
       label: 'Category',
     },
     {
       component: 'Input',
+      componentProps: {
+        placeholder: 'Please enter productName',
+      },
       fieldName: 'productName',
       label: 'ProductName',
     },
     {
       component: 'Input',
+      componentProps: {
+        placeholder: 'Please enter price',
+      },
       fieldName: 'price',
       label: 'Price',
     },
@@ -66,6 +73,9 @@ const formOptions: VbenFormProps = {
   ],
   // 控制表单是否显示折叠按钮
   showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
   // 按下回车时是否提交表单
   submitOnEnter: false,
 };
@@ -84,7 +94,6 @@ const gridOptions: VxeGridProps<RowType> = {
     { field: 'price', title: 'Price' },
     { field: 'releaseDate', formatter: 'formatDateTime', title: 'Date' },
   ],
-  height: 'auto',
   keepSource: true,
   pagerConfig: {},
   proxyConfig: {
@@ -105,7 +114,7 @@ const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
 </script>
 
 <template>
-  <Page auto-content-height>
+  <div class="vp-raw w-full">
     <Grid />
-  </Page>
+  </div>
 </template>

docs/src/demos/vben-vxe-table/remote/index.vue

@@ -5,7 +5,8 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
-import { getExampleTableApi } from '../mock-api';
+import { type DemoTableApi } from '../mock-api';
+import { MOCK_API_DATA } from '../table-data';
 
 interface RowType {
   category: string;
@@ -16,6 +17,43 @@ interface RowType {
   releaseDate: string;
 }
 
+// 数据实例
+// const MOCK_TREE_TABLE_DATA = [
+//   {
+//     date: '2020-08-01',
+//     id: 10_000,
+//     name: 'Test1',
+//     parentId: null,
+//     size: 1024,
+//     type: 'mp3',
+//   },
+// ]
+
+const sleep = (time = 1000) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+/**
+ * 获取示例表格数据
+ */
+async function getExampleTableApi(params: DemoTableApi.PageFetchParams) {
+  return new Promise<{ items: any; total: number }>((resolve) => {
+    const { page, pageSize } = params;
+    const items = MOCK_API_DATA.slice((page - 1) * pageSize, page * pageSize);
+
+    sleep(1000).then(() => {
+      resolve({
+        total: items.length,
+        items,
+      });
+    });
+  });
+}
+
 const gridOptions: VxeGridProps<RowType> = {
   checkboxConfig: {
     highlight: true,
@@ -31,7 +69,7 @@ const gridOptions: VxeGridProps<RowType> = {
     { field: 'releaseDate', formatter: 'formatDateTime', title: 'DateTime' },
   ],
   exportConfig: {},
-  height: 'auto',
+  // height: 'auto', // 如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素，否则会出现高度闪动问题
   keepSource: true,
   proxyConfig: {
     ajax: {
@@ -59,7 +97,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <div class="vp-raw w-full">
-    <Grid class="h-80 w-full" table-title="数据列表" table-title-help="提示">
+    <Grid>
       <template #toolbar-tools>
         <Button class="mr-2" type="primary" @click="() => gridApi.query()">
           刷新当前页面