配置
@erp/biz 提供的全局配置功能,用于统一管理表格等组件的默认配置。
核心功能
- mergeGridProps - 合并 VXE 表格配置
- 内置分页、虚拟滚动、列配置持久化等默认配置
- 支持框选、拖拽等高级功能
引入方式
typescript
import { mergeGridProps } from '@erp/biz'
import type { VxeGridProps, VxeTableDefines } from '@erp/biz'Grid 表格配置
mergeGridProps
合并 Grid 表格配置,返回带有默认配置的表格属性。
typescript
import { mergeGridProps } from '@erp/biz'
const gridProps = mergeGridProps({
id: 'user-table',
columns: [
{ type: 'seq', width: 60 },
{ type: 'checkbox', width: 50 },
{ field: 'name', title: '姓名' },
{ field: 'age', title: '年龄' }
]
})默认配置
typescript
const DefaultGridProps = {
border: false,
stripe: false,
height: 500,
showOverflow: true,
// 加载配置
loadingConfig: {
text: '加载中...'
},
// 列配置
columnConfig: {
resizable: true,
maxWidth: 360,
isHover: true
},
// 行配置
rowConfig: {
keyField: 'id',
isHover: true,
resizable: true,
isCurrent: true
},
// 虚拟滚动 Y
scrollY: {
enabled: true,
gt: 20,
oSize: 10
},
// 虚拟滚动 X
scrollX: {
enabled: true,
gt: 0,
oSize: 6
},
// 分页配置
pagerConfig: {
current: 1,
pageSize: 20,
total: 0,
showTotal: true,
showJumper: true,
showPageSize: true,
pageSizeOptions: [20, 50, 100, 200, 500],
size: 'small',
cache: true
}
}列配置持久化
配置 id 后支持列配置持久化:
typescript
const gridProps = mergeGridProps({
id: 'my-table', // 必须设置
columns: [
{ type: 'seq', width: 60 }, // 自动添加设置按钮
{ field: 'name', title: '姓名' }
],
customConfig: {
storage: true
}
})框选模式
包含 checkbox 列时自动启用框选:
typescript
const gridProps = mergeGridProps({
columns: [
{ type: 'checkbox', width: 50 },
{ field: 'name', title: '姓名' }
]
})
// 自动添加:
// mouseConfig: { area: true, selected: true }
// checkboxConfig: { isShiftKey: true, range: true }类型定义
typescript
import type {
VxeGridProps,
VxeGridListeners,
VxeGridInstance,
VxeTableDefines,
VxeTableProps,
VxeColumnPropTypes
} from '@erp/biz'