feat(vxe-table): 集成表格插件并优化初始化配置
- 添加了完整的 vxe-table 插件功能实现 - 实现了插件上下文选项注入机制 - 重构了 useTableForm 工厂函数的初始化逻辑 - 支持通过参数或上下文注入 useVbenForm 函数 - 优化了组件导入和类型定义 - 添加了插件使用文档说明 - 移除了未使用的组件注释代码 - 统一了字符串引号格式为双引号pull/340/MERGE
parent
4c320346c3
commit
e555f71bf8
|
|
@ -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';
|
||||||
|
```
|
||||||
|
|
@ -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();
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue