表格
采用可交互的动态数据表格组件，支持多维度排序、灵活筛选、批量操作及可视化对比，具备响应式布局与性能优化功能，实现高效的结构化数据展示与管理。
基础
列过滤
布局
排序
操作列
行编辑
动态逻辑
数据聚合
分组
内置工具栏
表格导出
值显示
内置导航
合并行或列
列更新
界面样式及图标
事件
能力调用
显示模式
行展开
百分比
刷新模式
换行模式
分组行模式
虚拟表格
透视表
输入参数
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| modelData | 表格模型数据 | Object as IDEGrid | - |
| context | 应用上下文对象 | Object as IContext | - |
| params | 视图参数对象 | Object as IParams | {} |
| provider | 部件适配器 | Object as IControlProvider | - |
| mdctrlActiveMode | 部件行数据默认激活模式，值为0:不激活，值为1：单击激活，值为2：双击激活 | Number | - |
| singleSelect | 是否单选 | Boolean | - |
| rowEditOpen | 是否启用行编辑 | Boolean | - |
| isSimple | 是否是简单模式，即直接传入数据，不加载数据 | Boolean | - |
| data | 简单模式下传入的数据 | Array<IData> | - |
| loadDefault | 是否默认加载数据 | Boolean | true |
状态
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| isCreated | 控制器是否走完created生命周期 | boolean | false |
| isMounted | 控制器是否走完mounted生命周期 | boolean | false |
| isDestroyed | 控制器是否走完destroy生命周期 | boolean | false |
| context | 应用上下文对象 | IApiContext | {} |
| activated | 当前部件是否为激活状态(缓存下的激活状态，一般与框架的生命周期相同) | boolean | false |
| isSimple | 是否是简单模式,简单模式下不加载数据，而是由父组件传值 | boolean | false |
| isLoading | 部件是否正在加载 | boolean | false |
| loadDefault | 是否默认加载数据 | boolean | true |
| disabled | 部件禁用状态 | boolean | false |
| maskOption | 部件遮罩参数 | IApiMaskOption | - |
| items | 多数据部件数据集合 | IApiData[] | [] |
| selectedData | 多数据部件已选中的数据集合 | IApiData[] | [] |
| selectedKeys | 多数据部件选中数据主键集合 | string[] | - |
| singleSelect | 是否是单项选择 | boolean | true |
| mdctrlActiveMode | 多数据部件激活模式,0：无激活；1：单击激活；2：双击激活 | number | 0 | 1 | 2 | 0 |
| curPage | 当前页 | number | 1 |
| size | 分页条数 | number | 20 |
| total | 总条数 | number | 0 |
| totalx | 全部计数条数，数据集配置需勾选返回全部计数 | number | 0 |
| totalPages | 总页数 | number | - |
| isLoaded | 是否加载过数据，用于某些需要等待数据加载回来之后的场景。 | boolean | false |
| searchParams | 搜索部件的查询参数 | IApiParams | {} |
| noSort | 是否禁用排序 | boolean | false |
| sortQuery | 排序查询条件 | string | '' |
| groups | 分组数据 | IApiMDControlGroupState[] | [] |
| hideNoDataImage | 隐藏无数据图片，该状态仅PC端使用。 | boolean | false |
| enableNavView | 是否启用内置导航视图，该状态仅PC端使用。 | boolean | false |
| showNavView | 是否显示内置导航视图，该状态仅PC端使用。 | boolean | false |
| showNavIcon | 是否显示内置导航图标，导航视图显示模式为程序控制时不显示。该状态仅PC端使用。 | boolean | false |
| showRowDetail | 是否显示行明细，该状态仅PC端（表格，列表）使用。 | boolean | false |
| enableGroup | 是否启用分组，该状态仅PC端（表格，卡片，列表）使用。 | boolean | - |
| rows | 表格行状态 | IApiGridRowState[] | [] |
| columnStates | 表格列状态数组，顺序就是列的排序 | IApiColumnState[] | [] |
| aggResult | 聚合计算的结果 | IApiData | {} |
| totalResult | 统计结果 | IApiData | {} |
| remoteAggResult | 远程聚合计算结果 | IApiData | {} |
| rowEditOpen | 开启表格行编辑,表格样式为自动表格(AUTOGRID)时默认为true，否则为false | boolean | false |
| isAutoGrid | 是否为自动表格,自动表格可添加行 | boolean | false |
| zIndex | 表格popover层级 | number | - |
| hideHeader | 隐藏表格头部 | boolean | false |
| enablePagingBar | 是否启用分页栏 | boolean | true |
| simpleData | simple数据 | IApiData[] | [] |
控制器
| 名称 | 说明 | 类型 |
|---|---|---|
| id | 控制器实例的唯一标识,创建时自动生成 | string |
| state | 状态对象，泛型 | S |
| model | 模型对象，泛型 | T |
| context | 应用上下文对象 | IApiContext |
| params | 视图参数对象 | IApiParams |
| view | 当前视图控制器 | IApiViewController & IApiData |
| ctrlId | 部件标识 | string |
| controlParams | 部件参数 | IApiParams |
| layoutPanel | 部件布局面板控制器 | IApiViewLayoutPanelController & IApiData |
| runMode | 运行模式（DESIGN：设计模式，RUNTIME：运行时） | 'DESIGN' | 'RUNTIME' |
| columns | 表格列数据 | { [key: string]: IApiGridColumnController } |
| force | 强制更新，触发render函数 | (_callback?: () => void) => void |
| startLoading | 开始加载 | () => Promise<void> |
| endLoading | 加载完毕 | () => Promise<void> |
| getControlType | 获取部件类型 | () => string |
| enable | 取消部件禁用 | () => void |
| disabled | 设置部件禁用 | (options?: IApiMaskOption) => void |
| emitDEDataChange | 触发实体数据变更的通知 | (type: 'create' | 'update' | 'remove', data: IApiData) => void |
| setSort | 设置排序 | (key?: string, order?: 'asc' | 'desc') => void |
| loadMore | 加载更多 | () => Promise<void> |
| load | 加载数据 | (args?: IApiMDCtrlLoadParams) => Promise<IApiData[]> |
| remove | 删除数据 | (args?: IApiMDCtrlRemoveParams) => Promise<void> |
| refresh | 刷新数据 | () => Promise<void> |
| importData | 导入数据 | () => Promise<void> |
| getData | 获取选中数据 | () => IApiData[] |
| setSelection | 设置选中数据,设置的数据和已经选中的一样时会触发onSelectionChange事件 | (selection: IApiData[], isEmit?: boolean) => void |
| setActive | 设置激活数据 | (data: IApiData, event?: MouseEvent | undefined) => Promise<void> |
| goToFirstPage | 跳转第一页 | () => Promise<IApiData[]> |
| goToPreviousPage | 跳转上一页 | () => Promise<IApiData[]> |
| goToNextPage | 跳转下一页 | () => Promise<IApiData[]> |
| goToLastPage | 跳转最后一页 | () => Promise<IApiData[]> |
| selectAll | 选中全部数据 | (state?: boolean) => void |
| execGroup | 执行多数据分组 | (arg: IApiMDGroupParams[], params?: IApiParams) => Promise<void> |
| setSelectedData | 设置选中数据 | (items: IData[]) => void |
| newRow | 新建行 | (args?: IApiMDCtrlLoadParams) => Promise<void> |
| save | 保存单条数据 | (data: IApiData) => Promise<void> |
| setRowValue | 设置行属性的值 | (row: IApiGridRowState, name: string, value: unknown, ignore: boolean) => Promise<void> |
| validate | 校验一行数据的所有编辑项 | (row: IApiGridRowState) => Promise<boolean> |
| validateAll | 校验所有行数据 | () => Promise<boolean> |
| saveAll | 保存表格所有数据 | () => Promise<void> |
| toggleRowEdit | 切换表格的行编辑开启关闭状态 | () => void |
| switchRowEdit | 切换单行的编辑状态 | (row: IApiGridRowState, editable?: boolean, isSave?: boolean) => Promise<void> |
| updateGridEditItem | 表格编辑项更新 | (row: IApiGridRowState, updateId: string) => Promise<void> |
| exportData | 导出数据，导出成Excel文件 | (args: { event?: MouseEvent; params: IApiData }) => Promise<void> |
| findRowState | 基于数据获取行数据控制器 | (data: IApiData) => IApiGridRowState | undefined |
| changeCollapse | 切换折叠(分组表格使用) | (params?: { tag?: string; expand?: boolean }) => void |
| getGridColumn | 获取表格列 | (type: K, id: string) => IApiGridColumnMapping[K] |
事件
| 名称 | 描述 | 类型 |
|---|---|---|
| onCreated | 自身的准备工作完成(如模型加载，各种初始化，init结束) | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onMounted | 没有下级组件created之后的生命周期,有下级时需要等所有下级组件onMounted完成后触发 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onBeforeDestroy | 组件销毁前 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onDestroyed | 自身组件被销毁时触发 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onActivated | 自身组件重新激活 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onDeactivated | 自身组件暂时停用 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onUIAction | 界面行为执行 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onRefreshSuccess | 刷新成功 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onActive | 数据激活事件 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onSelectionChange | 选中数据变更事件 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onBeforeSave | 保存之前 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onSaveSuccess | 保存成功后 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onSaveError | 保存失败 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onBeforeRemove | 删除之前 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onRemoveSuccess | 删除成功之后 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onRemoveError | 删除失败 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onBeforeLoad | 加载前事件 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onLoadSuccess | 加载后处理事件 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onLoadError | 加载失败 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onNavDataChange | 导航数据变更 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onGridDataChange | 设置表格数据 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onRowEditChange | 表格行编辑切换 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
| onToggleRowExpansion | 切换行展开 | {eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any} |
控件动态参数
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| overflowmode | 单元格内容超出单元格宽度时的呈现模式，包含超出省略 'ellipsis'，换行 'wrap' 两种模式 | 'wrap' | 'ellipsis' | 'wrap' |
| emptyhiddenunit | 单元格无值时，其对应的值单位（如'天'、'%'等）是否隐藏 | boolean | true |
| editshowmode | 表格进行行编辑时的呈现模式，包含单行编辑模式 'row'，单元格编辑 'cell' 模式，整个表格编辑模式 'all' 三种模式 | 'row' | 'cell' | 'all' | 'row' |
| editsavemode | 处理表格进行行编辑时的保存模式，包含单元格失焦 'cell-blur' 时保存，自动保存 'auto'，手动确认 'manual' 三种模式 | 'cell-blur' | 'auto' | 'manual' | 'cell-blur' |
| saveerrorhandlemode | 表格保存错误时的处理模式，包含提示错误信息 'default' 和重置表格行数据 'reset' 两种模式 | 'default' | 'reset' | 'default' |
| enablejsonschema | 是否启用自定义添加表格列功能，当参数为true且后台返回 jsonschema 格式的表格列相关数据时执行添加操作 | boolean | false |
| jsonschemaparams | 当enablejsonschema值为true时生效。支持配置 JSON 字符串并将其转化为导航参数，该参数将被附加到获取实体的 jsonschema 数据的请求参数中，获取的数据解析后用于自定义添加表格列功能，示例格式：{"test":"%test%"} | string | '{}' |
| percentkeys | 表示表格哪些列的单元格要显示百分比 | string[] | [] |
| showmode | 'DEFAULT' 显示分页栏、表格头部、无数据提示的文字及图片；'ONLYDATA' 仅显示数据区域，不显示分页栏与表格头部，在无值时不显示无数据提示图片；'MIXIN' 无数据时仅显示数据区域，不显示分页栏、表格头部、无数据提示图片 | 'DEFAULT' | 'ONLYDATA' | 'MIXIN' | 'DEFAULT' |
| rowspankeys | 用于指定表格中需要合并单元格的行，取值为表格列的 prop值（表格列模型代码标识）数组 | string[] | [] |
| colspankeys | 用于指定表格中需要合并单元格的列，取值为表格列的 prop值（表格列模型代码标识）数组 | string[] | [] |
| defaultexpandall | 树形表格时是否默认全部展开 | boolean | false |
| triggermode | 该配置项用于指定编辑器触发 emit 事件的模式。若值为 'input'，则在输入框值变更时触发 change 事件；若值为 'blur'，则在输入框失去焦点时触发 change 事件 | 'blur' | 'input' | 'blur' |
| mdctrlrefreshmode | 多数据部件刷新模式，当值为 'cache'，部件刷新时保留选中数据；当值为 'nocache'，部件刷新时清空选中数据 | 'nocache' | 'cache' | 'cache' |
| grouprowmode | 表格分组行模式，当值为 DEFAULT 时,表示分组行由业务数据第一行出，NEWROW 表示分组行独出一行 | 'DEFAULT'|'NEWROW' | 'DEFAULT' |
部件成员
| 类型 | 名称 | 接口 |
|---|---|---|
| DEFGRIDCOLUMN | 表格属性列 | IApiGridFieldColumnController |
| DEFGRIDCOLUMN_EDIT | 表格编辑列 | IApiGridFieldEditColumnController |
| GROUPGRIDCOLUMN | 表格分组列 | IApiGridGroupColumnController |
| UAGRIDCOLUMN | 表格操作列 | IApiGridUAColumnController |