@scvzerng/element-plus-ag-grid

@scvzerng/element-ag-grid-monorepo

Vue 2 / Vue 3 双版本 ag-grid 表格组件,共享 core 业务层

仓库结构

hubao/
├── packages/
│   ├── core/                            # @scvzerng/ag-grid-core (vue 无关业务层)
│   ├── element-plus-ag-grid/            # @scvzerng/element-plus-ag-grid (vue3 + element-plus)
│   └── element-ui-ag-grid-vue2/         # @scvzerng/element-ui-ag-grid-vue2 (vue2.7 + element-ui)
├── pnpm-workspace.yaml
├── package.json                         # 根 scripts
└── README.md

包职责

@scvzerng/ag-grid-core (packages/core)

纯业务层,框架无关。vue peerDep >=2.7.0,vue 2.7+ 与 vue 3.5+ 都可消费。

• 数据模型: ActualRow / EditableRow / CellEditableRow / ProjectionRow / GridRow
• 业务模块: clientSideRowModel / selection / use-sort / use-grid-state / use-grid / use-footer / use-proxy
• 类型: tokens.ts (含 RowChangeCallback, GridContext, GRID_CONTEXT)
• 工具: GridUtils, useGridScroll, ServerGetRowsParamsRequest
• 共享 CSS: src/Grid.scss (通过 package.json#exports["./Grid.scss"] 暴露)
• 配置常量: CLEAN_AG_GRID_OPTIONS, RestrictedAgGridOptions

响应式抽象:

• useGridState 通过 InstanceTraversalCtx 回调注入,让 core 不直接 import getCurrentInstance / ComponentInternalInstance
• buildProxyOptions 通过 onMessageError 回调注入,让 core 不依赖 element-plus / element-ui
• useGrid 通过 onError + instanceCtx 回调注入,跟 UI 库完全解耦

@scvzerng/element-plus-ag-grid (packages/element-plus-ag-grid)

Vue 3 + element-plus 适配层。依赖 @scvzerng/ag-grid-core。

• ag-grid-vue3 (官方 npm 包)
• @imengyu/vue3-context-menu 集成右键菜单
• search/ toolbar/ render/ (.tsx, h 函数)
• use-grid.ts / use-proxy.ts / use-grid-state.ts / use-footer.ts 薄壳,注入 ElMessage / vue3 instance 遍历

@scvzerng/element-ui-ag-grid-vue2 (packages/element-ui-ag-grid-vue2)

Vue 2.7 + element-ui 适配层。依赖 @scvzerng/ag-grid-core。

• 本地 ag-grid-vue/ 适配层 (~700 行,因 ag-grid 官方未提供 vue2 适配)
• @scvzerng/vue2-context-menu 集成右键菜单
• search/ toolbar/ render/ (createElement + functional component)
• use-grid.ts / use-proxy.ts / use-grid-state.ts / use-footer.ts 薄壳,注入 Message / vue2 instance 遍历
• helper/vModel.ts (vue2 JSX 翻译绕开 this.$set 报错)

开发

# 安装 (monorepo 根)
pnpm install

# 单包开发
pnpm --filter @scvzerng/element-plus-ag-grid dev     # vue3 + element-plus
pnpm --filter @scvzerng/element-ui-ag-grid-vue2 dev  # vue2 + element-ui

# 单包构建
pnpm --filter @scvzerng/ag-grid-core build
pnpm --filter @scvzerng/element-plus-ag-grid build
pnpm --filter @scvzerng/element-ui-ag-grid-vue2 build

# 全部构建
pnpm -r build

# 类型检查
pnpm -r typecheck

改动业务核心

只需要改 packages/core 一个地方。两个 adapter 各自 pnpm install (会通过 workspace 协议拉最新 core) 后就同步生效。

跨版本同步新功能

新功能如果跟响应式/UI 无关,直接放 packages/core/src/ 并在 index.ts 导出。adapter 端通过 @scvzerng/ag-grid-core 引用即可。

跟 UI/响应式相关的功能,需要在 core 抽象回调接口,在两个 adapter 各写一份薄壳。

发布

每个包独立发版:

pnpm --filter @scvzerng/ag-grid-core publish
pnpm --filter @scvzerng/element-plus-ag-grid publish
pnpm --filter @scvzerng/element-ui-ag-grid-vue2 publish

依赖关系: core 先发,两个 adapter 后发(因为它们依赖 core)。

历史

本 monorepo 是从两个独立仓库合并而来:

• element-plus-ag-grid (vue 3)
• element-plus-ag-grid-vue2 (vue 2.7)

迁移计划见 packages/element-plus-ag-grid/.trae/specs/monorepo-refactor/plan.md。