Skip to content
On this page

组件文档

本模块说明 @grow-admin-rock/components 中与业务强相关的组件用法,按两类组织:

类型含义典型组件
契约组件三库共有能力的薄封装,靠驱动映射到 EP / Naive / AntdvGrowButtonGrowInput
预设组件框架内置业务封装(isPresetComponent),不依赖具体 UI 驱动实现GrowSearchBarGrowColumnBarGrowIconify

先读什么?

文档目录

组件库基础

章节说明
组件驱动架构Grow* 与三套 UI 驱动的桥接原理
Grow 契约组件模板里使用契约组件的通用写法
命令式 APIMessage / Notice / Dialog 等统一调用
切换组件库全局切换 Element Plus / Naive UI / Ant Design Vue
局部覆盖组件库单页或局部子树使用不同 UI 库

预设业务组件

组件说明演示
SearchBar 高级搜索栏可组合查询条件弹层功能示例 → 高级搜索栏
ColumnBar 表格列设置列显隐树形配置功能示例 → 表格列设置
AbstractEle 动态表单项按配置渲染 Grow 表单控件配合 SearchBar

其他组件

组件说明
其他组件Iconify、SplitPane 等
代码沙箱独立模块:编辑器 / 依赖 / SFC 预览
页面设计器低代码页面设计
报表设计器图表看板设计与渲染
数据库建模表 / 字段 / 关联可视化建模(PostgreSQL)
数据准备Dataset:选表、Join、维度 / 度量

引入方式

多数组件在宿主 onSetup 后已全局注册,模板可直接使用:

vue
<GrowSearchBar :search="searchList" @search="onSearch" />
<GrowColumnBar :columns="columns" @confirm="onConfirm" />

需要类型或具名导出时:

ts
import type { SearchBarField } from '@grow-admin-rock/components/search-bar'
import { GrowSearchBar } from '@grow-admin-rock/components/search-bar'

import type { ColumnBarItem } from '@grow-admin-rock/components/column-bar'
import { GrowColumnBar } from '@grow-admin-rock/components/column-bar'

国际化

预设组件文案依赖 @grow-admin-rock/locale,相关 key:

命名空间用途
PUBLIC.*查询 / 重置 / 确认 / 暂无数据等公共文案
SEARCH_BAR.*高级搜索栏
COLUMN_BAR.*列设置(如全选)