feat(vxe-table): 集成表格插件并优化初始化配置

- 添加了完整的 vxe-table 插件功能实现
- 实现了插件上下文选项注入机制
- 重构了 useTableForm 工厂函数的初始化逻辑
- 支持通过参数或上下文注入 useVbenForm 函数
- 优化了组件导入和类型定义
- 添加了插件使用文档说明
- 移除了未使用的组件注释代码
- 统一了字符串引号格式为双引号
pull/340/MERGE
Jin Mao 2026-03-25 13:32:21 +08:00
parent 4c320346c3
commit e555f71bf8
2 changed files with 70 additions and 35 deletions

View File

@ -0,0 +1,43 @@
# VXE Table Plugin
基于 vxe-table 和 vxe-pc-ui 的表格组件插件。
## 导出
| 导出 | 类型 | 说明 |
|------|------|------|
| `setupVbenVxeTable` | 函数 | 初始化配置函数 |
| `useVbenVxeGrid` | 函数 | 表格组合式函数 |
| `VbenVxeGrid` | 组件 | 表格组件 |
| `VxeTableGridColumns` | 类型 | 表格列类型 |
| `VxeTableGridOptions` | 类型 | 表格配置类型 |
| `VxeGridProps` | 类型 | 表格 Props |
| `VxeGridListeners` | 类型 | 表格事件类型 |
## 使用
```ts
import { setupVbenVxeTable, useVbenVxeGrid, VbenVxeGrid } from '@vben/plugins/vxe-table';
```
## 初始化
在应用入口处调用:
```ts
import { setupVbenVxeTable } from '@vben/plugins/vxe-table';
import { useVbenForm } from '@vben-core/form-ui';
setupVbenVxeTable({
configVxeTable: (vxeUI) => {
// 配置 VXE Table
},
useVbenForm,
});
```
## 类型
```ts
import type { VxeTableGridOptions, VxeGridProps } from '@vben/plugins/vxe-table';
```

View File

@ -1,56 +1,37 @@
import type { SetupVxeTable } from './types'; import type { SetupVxeTable } from "./types";
import { defineComponent, watch } from 'vue'; import { defineComponent, watch } from "vue";
import { usePreferences } from '@vben/preferences'; import { usePreferences } from "@vben/preferences";
import { useVbenForm } from '@vben-core/form-ui'; import { injectPluginsOptions } from "../plugins-context";
import { import {
VxeButton, VxeButton,
VxeCheckbox, VxeCheckbox,
// VxeFormGather,
// VxeForm,
// VxeFormItem,
VxeIcon, VxeIcon,
VxeInput, VxeInput,
VxeLoading, VxeLoading,
VxeModal, VxeModal,
VxeNumberInput, VxeNumberInput,
VxePager, VxePager,
// VxeList,
// VxeModal,
// VxeOptgroup,
// VxeOption,
// VxePulldown,
// VxeRadio,
// VxeRadioButton,
VxeRadioGroup, VxeRadioGroup,
VxeSelect, VxeSelect,
VxeTooltip, VxeTooltip,
VxeUI, VxeUI,
VxeUpload, VxeUpload
// VxeSwitch, } from "vxe-pc-ui";
// VxeTextarea, import enUS from "vxe-pc-ui/lib/language/en-US";
} from 'vxe-pc-ui';
import enUS from 'vxe-pc-ui/lib/language/en-US';
// 导入默认的语言 // 导入默认的语言
import zhCN from 'vxe-pc-ui/lib/language/zh-CN'; import zhCN from "vxe-pc-ui/lib/language/zh-CN";
import { import { VxeColgroup, VxeColumn, VxeGrid, VxeTable, VxeToolbar } from "vxe-table";
VxeColgroup,
VxeColumn,
VxeGrid,
VxeTable,
VxeToolbar,
} from 'vxe-table';
import { extendsDefaultFormatter } from './extends'; import { extendsDefaultFormatter } from "./extends";
// 是否加载过 // 是否加载过
let isInit = false; let isInit = false;
let tableFormFactory: typeof useVbenForm | undefined; let tableFormFactory: ((...args: any[]) => any) | undefined;
function normalizeVxeLocale<T extends Record<string, any>>(localeModule: T) { function normalizeVxeLocale<T extends Record<string, any>>(localeModule: T) {
return ( return (
@ -62,13 +43,19 @@ function normalizeVxeLocale<T extends Record<string, any>>(localeModule: T) {
) as T; ) as T;
} }
export const useTableForm: typeof useVbenForm = ((...args) => { export const useTableForm = ((...args: any[]) => {
const pluginsOptions = injectPluginsOptions();
if (!tableFormFactory) { if (!tableFormFactory) {
throw new Error('useTableForm is not initialized'); if (pluginsOptions?.form?.useVbenForm) {
tableFormFactory = pluginsOptions.form.useVbenForm;
} else {
throw new Error('useTableForm is not initialized');
}
} }
return tableFormFactory(...args); return tableFormFactory(...args);
}) as typeof useVbenForm; });
// 部分组件如果没注册vxe-table 会报错,这里实际没用组件,只是为了不报错,同时可以减少打包体积 // 部分组件如果没注册vxe-table 会报错,这里实际没用组件,只是为了不报错,同时可以减少打包体积
const createVirtualComponent = (name = '') => { const createVirtualComponent = (name = '') => {
@ -118,10 +105,15 @@ export function initVxeTable() {
} }
export function setupVbenVxeTable(setupOptions: SetupVxeTable) { export function setupVbenVxeTable(setupOptions: SetupVxeTable) {
const { configVxeTable, useVbenForm } = setupOptions; const { configVxeTable, useVbenForm: useVbenFormFromParam } = setupOptions;
initVxeTable(); initVxeTable();
tableFormFactory = useVbenForm;
const pluginsOptions = injectPluginsOptions();
const useVbenFormFromContext = pluginsOptions?.form?.useVbenForm;
// 优先级:参数传入 > context 注入
tableFormFactory = useVbenFormFromParam || useVbenFormFromContext;
const { isDark, locale } = usePreferences(); const { isDark, locale } = usePreferences();