Skip to content

配置

@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'

基于 MIT 许可发布