# ProTable 智能表格组件

<cite>
**本文引用的文件**
- [ProTable.vue](file://packages/components/ProTable.vue)
- [ProTable.d.ts](file://types/ProTable.d.ts)
- [ProTable.vue（演示）](file://src/views/ProTable.vue)
- [TableRender.vue（演示）](file://src/views/TableRender.vue)
- [ProSearch.vue](file://packages/components/ProSearch.vue)
- [ProSearch.vue（演示）](file://src/views/ProSearch.vue)
- [ProForm.vue](file://packages/components/ProForm.vue)
- [ProForm.vue（演示）](file://src/views/ProForm.vue)
- [ProTableEdit.vue](file://packages/components/ProTableEdit.vue)
- [ProCheckBox.vue](file://packages/components/ProCheckBox.vue)
- [request.js](file://packages/libs/request.js)
- [util.js](file://packages/libs/util.js)
- [locale.js](file://packages/mixin/locale.js)
- [index.js（组件导出）](file://packages/components/index.js)
- [main.js](file://src/main.js)
</cite>

## 目录
1. [简介](#简介)
2. [项目结构](#项目结构)
3. [核心组件](#核心组件)
4. [架构总览](#架构总览)
5. [详细组件分析](#详细组件分析)
6. [全局映射配置系统](#全局映射配置系统)
7. [依赖关系分析](#依赖关系分析)
8. [性能考虑](#性能考虑)
9. [故障排查指南](#故障排查指南)
10. [结论](#结论)
11. [附录](#附录)

## 简介
ProTable 是一个基于 View UI Plus 的智能表格组件，提供数据展示、搜索、分页、行内编辑、工具栏、列设置、弹窗表单联动等能力，并与 ProSearch、ProForm 等组件深度集成，支持远程数据请求、列级渲染与规则校验、国际化、全屏模式等高级特性。**新增全局映射配置系统**，通过 `$PRO_IVIEW` 全局配置和组件级配置的层级合并机制，增强了数据路径配置的灵活性和可维护性。

## 项目结构
围绕 ProTable 的关键文件组织如下：
- 组件本体：packages/components/ProTable.vue
- 类型定义：types/ProTable.d.ts
- 演示页面：src/views/ProTable.vue、src/views/TableRender.vue
- 搜索与表单：packages/components/ProSearch.vue、packages/components/ProForm.vue
- 编辑增强版：packages/components/ProTableEdit.vue
- 请求封装：packages/libs/request.js
- 工具函数：packages/libs/util.js
- 国际化混入：packages/mixin/locale.js
- 组件导出入口：packages/components/index.js
- 应用入口配置：src/main.js

```mermaid
graph TB
subgraph "视图层"
VPT["演示: ProTable.vue"]
VTR["演示: TableRender.vue"]
VPS["演示: ProSearch.vue"]
VPFO["演示: ProForm.vue"]
end
subgraph "业务组件"
PT["ProTable.vue"]
PS["ProSearch.vue"]
PF["ProForm.vue"]
PTE["ProTableEdit.vue"]
PCB["ProCheckBox.vue"]
end
subgraph "基础设施"
REQ["request.js"]
UTIL["util.js"]
LOCALE["locale.js"]
IDX["index.js"]
MAIN["main.js"]
end
VPT --> PT
VTR --> PT
VPS --> PS
VPFO --> PF
PT --> PS
PT --> PF
PT --> PTE
PT --> PCB
PT --> REQ
PT --> UTIL
PT --> LOCALE
IDX --> PT
IDX --> PS
IDX --> PF
IDX --> PTE
IDX --> PCB
MAIN --> PT
```

图表来源
- [ProTable.vue:1-152](file://packages/components/ProTable.vue#L1-L152)
- [ProSearch.vue:1-112](file://packages/components/ProSearch.vue#L1-L112)
- [ProForm.vue:1-144](file://packages/components/ProForm.vue#L1-L144)
- [ProTableEdit.vue:1-120](file://packages/components/ProTableEdit.vue#L1-L120)
- [ProCheckBox.vue:1-158](file://packages/components/ProCheckBox.vue#L1-L158)
- [request.js:1-78](file://packages/libs/request.js#L1-L78)
- [util.js:1-110](file://packages/libs/util.js#L1-L110)
- [locale.js:1-18](file://packages/mixin/locale.js#L1-L18)
- [index.js（组件导出）:1-23](file://packages/components/index.js#L1-L23)
- [main.js:1-23](file://src/main.js#L1-L23)

章节来源
- [ProTable.vue:1-152](file://packages/components/ProTable.vue#L1-L152)
- [ProTable.d.ts:1-59](file://types/ProTable.d.ts#L1-L59)
- [ProTable.vue（演示）:1-306](file://src/views/ProTable.vue#L1-L306)
- [TableRender.vue（演示）:1-51](file://src/views/TableRender.vue#L1-L51)
- [ProSearch.vue（演示）:1-59](file://src/views/ProSearch.vue#L1-L59)
- [ProForm.vue（演示）:1-198](file://src/views/ProForm.vue#L1-L198)
- [index.js（组件导出）:1-23](file://packages/components/index.js#L1-L23)
- [main.js:1-23](file://src/main.js#L1-L23)

## 核心组件
- ProTable：主表格组件，负责搜索、分页、工具栏、列过滤、行内编辑、弹窗表单、远程请求、国际化等，**新增全局映射配置系统**。
- ProSearch：搜索表单，支持列级渲染、标签位置、行数布局、展开收起、前置钩子。
- ProForm：弹窗表单，支持列级渲染、分组布局、校验规则、提交、视图模式。
- ProTableEdit：表格编辑增强版，支持行内编辑、新增/复制/删除/刷新、批量操作、保存校验。
- ProCheckBox：复选框组件，**实现全局映射配置系统的具体示例**，展示层级合并机制。
- request：统一请求封装，支持字符串/对象/函数三种请求形态，自动拼装 GET/POST 参数与占位替换。
- util：通用工具，包括模板字符串解析、函数序列化/反序列化、JSON 安全序列化、HTML 标签检测、空值清理。
- locale：国际化混入，提供 t 方法与 $t 方法。

章节来源
- [ProTable.vue:167-266](file://packages/components/ProTable.vue#L167-L266)
- [ProSearch.vue:114-194](file://packages/components/ProSearch.vue#L114-L194)
- [ProForm.vue:146-200](file://packages/components/ProForm.vue#L146-L200)
- [ProTableEdit.vue:1-120](file://packages/components/ProTableEdit.vue#L1-L120)
- [ProCheckBox.vue:60-158](file://packages/components/ProCheckBox.vue#L60-L158)
- [request.js:1-78](file://packages/libs/request.js#L1-L78)
- [util.js:1-110](file://packages/libs/util.js#L1-L110)
- [locale.js:1-18](file://packages/mixin/locale.js#L1-L18)

## 架构总览
ProTable 通过组合 ProSearch、ProForm、ProTypeItem 等组件，形成"搜索-表格-分页-弹窗表单"的完整数据工作流；请求通过 request 统一封装，**数据映射由合并后的 mergedMap 控制**，国际化通过 locale 提供。

```mermaid
sequenceDiagram
participant U as "用户"
participant PT as "ProTable"
participant PS as "ProSearch"
participant T as "Table(视图)"
participant PG as "Page(视图)"
participant PF as "ProForm"
participant REQ as "request"
U->>PS : 输入搜索条件
PS-->>PT : 触发 search/reset 事件
PT->>PT : 重置页码/合并查询参数(使用mergedMap)
PT->>REQ : 发起请求(含分页/搜索/格式化)
REQ-->>PT : 返回数据(含 dataPath/totalPath)
PT->>T : 渲染表格数据(使用mergedMap.dataPath)
PT->>PG : 渲染分页(total/pageSize/current)
U->>T : 点击操作按钮(新增/编辑/删除)
T-->>PT : 触发 typeAction/tableAction
PT->>PF : 打开弹窗表单(根据类型装载数据)
PF-->>PT : 校验通过后提交
PT->>REQ : 提交新建/编辑/删除
REQ-->>PT : 成功/失败回调(使用mergedMap.message/success)
PT->>T : 刷新列表
```

图表来源
- [ProTable.vue:605-830](file://packages/components/ProTable.vue#L605-L830)
- [ProSearch.vue:181-189](file://packages/components/ProSearch.vue#L181-L189)
- [ProForm.vue:1-144](file://packages/components/ProForm.vue#L1-L144)
- [request.js:39-77](file://packages/libs/request.js#L39-L77)

章节来源
- [ProTable.vue:605-830](file://packages/components/ProTable.vue#L605-L830)
- [ProSearch.vue:181-189](file://packages/components/ProSearch.vue#L181-L189)
- [ProForm.vue:1-144](file://packages/components/ProForm.vue#L1-L144)
- [request.js:39-77](file://packages/libs/request.js#L39-L77)

## 详细组件分析

### ProTable 组件
- 功能要点
  - 搜索：通过 ProSearch 渲染列级搜索控件，支持展开收起、前置钩子、格式化包装。
  - 分页：内置 Page 组件，支持页码变更、页大小变更、总数显示、页码格式化。
  - 工具栏：支持新增、刷新、全屏、列设置等动作，支持自定义渲染。
  - 列过滤：根据 notShowXxx 控制是否显示到搜索/表格/表单；支持 children 嵌套列。
  - 行内编辑：通过 renderTableSelf 注入 render，支持 ProTypeItem 渲染与双向绑定。
  - 弹窗表单：根据操作类型打开 ProForm，支持表单校验、提交、成功提示。
  - 请求：统一通过 customRequest 发起请求，支持字符串/对象/函数三种形态，支持占位替换与键选择。
  - 国际化：通过 locale 混入提供 t/$t 方法。
  - 全屏：集成 screenfull，支持全屏切换与样式控制。
  - **全局映射配置**：通过 mergedMap 计算属性实现组件级和全局配置的层级合并。
- 关键属性与行为
  - 属性：columns、request、method、headers、autoFetch、map、format、hide、submitForm、storage、attrs 等。
  - 计算属性：toolBarList、tableColumns、searchColumns、formColumns、form、proData、**mergedMap**。
  - 方法：search、fetch、pageSizeChange、searchAction、searchReset、tableAction、typeAction、submit、success、error、successHandle、getDatas、getSelection、finish 等。
- 事件
  - search、searchReset、pageClick、fetchFinish、uiConfig 等。
- 插槽
  - header/title、tableTip 等。

```mermaid
classDiagram
class ProTable {
+props : columns,request,method,headers,autoFetch,map,format,hide,submitForm,storage,attrs
+computed : toolBarList,tableColumns,searchColumns,formColumns,form,proData,mergedMap
+methods : search(),fetch(),pageSizeChange(),searchAction(),searchReset(),tableAction(),typeAction(),submit(),success(),error(),successHandle(),getDatas(),getSelection(),finish()
+events : search,searchReset,pageClick,fetchFinish,uiConfig
}
class ProSearch
class ProForm
class UIEditFrame
class Screenfull
class MergedMap {
+current : "current"(默认)
+pageSize : "pageSize"(默认)
+dataPath : "data"(默认)
+totalPath : "totalRows"(默认)
+message : undefined(默认)
+success : undefined(默认)
}
ProTable --> ProSearch : "组合"
ProTable --> ProForm : "组合"
ProTable --> UIEditFrame : "包装"
ProTable --> Screenfull : "全屏"
ProTable --> MergedMap : "使用"
```

图表来源
- [ProTable.vue:167-266](file://packages/components/ProTable.vue#L167-L266)
- [ProTable.vue:268-291](file://packages/components/ProTable.vue#L268-L291)
- [ProTable.vue:423-428](file://packages/components/ProTable.vue#L423-L428)
- [ProTable.vue:444-454](file://packages/components/ProTable.vue#L444-L454)

章节来源
- [ProTable.vue:167-266](file://packages/components/ProTable.vue#L167-L266)
- [ProTable.vue:271-422](file://packages/components/ProTable.vue#L271-L422)
- [ProTable.vue:456-850](file://packages/components/ProTable.vue#L456-L850)

### ProSearch 搜索组件
- 功能要点
  - 列级渲染：通过 renderSearch 定义搜索控件，支持格式化包装 wapperInput。
  - 布局：支持 top/left 两种标签位置，网格布局按 searchLineNum 控制每行列数。
  - 展开收起：超过一行时提供"展开/收起"按钮。
  - 交互：提供 search、reset 事件，支持 beforeSearch、beforeReset 钩子。
- 关键属性
  - position、columns、modelValue、searchLableWidth、searchLineNum、upDown。

```mermaid
flowchart TD
Start(["进入搜索"]) --> Init["初始化 columns 与 modelValue"]
Init --> Render["按列渲染控件<br/>优先使用 renderSearch"]
Render --> Interact{"用户点击搜索/重置?"}
Interact --> |搜索| HookSearch["触发 beforeSearch 钩子(可选)"]
HookSearch --> EmitSearch["发射 search 事件"]
Interact --> |重置| HookReset["触发 beforeReset 钩子(可选)"]
HookReset --> EmitReset["发射 reset 事件"]
EmitSearch --> End(["结束"])
EmitReset --> End
```

图表来源
- [ProSearch.vue:114-194](file://packages/components/ProSearch.vue#L114-L194)

章节来源
- [ProSearch.vue:114-194](file://packages/components/ProSearch.vue#L114-L194)

### ProForm 表单组件
- 功能要点
  - 列级渲染：通过 renderForm 定义表单项，支持 ProTypeItem。
  - 分组布局：按 formLineNum 控制每行列数，支持分组标题。
  - 校验：基于 rules，支持必填、正则等规则。
  - 提交：支持 submitForm 配置，提供 submit/reset。
  - 视图模式：type=view 时只读展示。
- 关键属性
  - submitForm、type、labelWidth、formLineNum、labelPosition、columns、modelValue。

```mermaid
sequenceDiagram
participant PT as "ProTable"
participant PF as "ProForm"
participant VAL as "校验器"
PT->>PF : 打开弹窗(设置 type/proFormData)
PF->>VAL : 校验 rules
VAL-->>PF : 校验结果
PF-->>PT : 校验通过/失败
PT->>PT : 根据结果调用 success/error 或继续等待
```

图表来源
- [ProForm.vue:1-144](file://packages/components/ProForm.vue#L1-L144)
- [ProTable.vue:799-830](file://packages/components/ProTable.vue#L799-L830)

章节来源
- [ProForm.vue:146-200](file://packages/components/ProForm.vue#L146-L200)
- [ProTable.vue:799-830](file://packages/components/ProTable.vue#L799-L830)

### ProTableEdit 编辑增强版
- 功能要点
  - 行内编辑：将列转换为可编辑单元格，支持焦点跳转、错误提示、提示气泡。
  - 批量操作：支持复制、删除、刷新、恢复等批量处理。
  - 保存：校验全部通过后调用 save 回调，支持新旧数据对比与分页联动。
  - 控制台：支持选择框、序号列、工具栏按钮等。
- 关键属性
  - columns、disabled、notShowLeftControls、addDirection、deleteOriginal、iviewTable、controls、autoFetch、editable、addDefaultValue、normalShowEdit、page、shortcuts、save。

```mermaid
flowchart TD
EStart(["进入编辑态"]) --> Columns["遍历 columns 转换为可编辑列"]
Columns --> EditCell["点击单元格进入编辑"]
EditCell --> Validate["实时校验 rules"]
Validate --> SaveCheck{"需要保存?"}
SaveCheck --> |否| EEnd(["退出编辑"])
SaveCheck --> |是| Save["调用 save 回调"]
Save --> Refresh["重置/刷新数据"]
Refresh --> EEnd
```

图表来源
- [ProTableEdit.vue:399-624](file://packages/components/ProTableEdit.vue#L399-L624)
- [ProTableEdit.vue:718-751](file://packages/components/ProTableEdit.vue#L718-L751)

章节来源
- [ProTableEdit.vue:1-120](file://packages/components/ProTableEdit.vue#L1-L120)
- [ProTableEdit.vue:399-624](file://packages/components/ProTableEdit.vue#L399-L624)
- [ProTableEdit.vue:718-751](file://packages/components/ProTableEdit.vue#L718-L751)

### ProCheckBox 复选框组件
- 功能要点
  - **全局映射配置系统示例**：展示如何实现组件级和全局配置的层级合并。
  - 数据路径解析：支持 dataPath、titlePath、valuePath 的灵活配置。
  - 请求处理：通过 customRequest 获取数据并应用合并后的映射配置。
- 关键属性
  - list、request、map、valueType、first、multiple 等。
- 计算属性
  - **mergedMap**：实现全局映射配置的层级合并。

```mermaid
flowchart TD
Global["全局配置 $PRO_IVIEW.map"] --> Merge["层级合并"]
Component["组件级配置 map"] --> Merge
Merge --> Result["mergedMap"]
Result --> DataPath["dataPath: data"]
Result --> TitlePath["titlePath: title"]
Result --> ValuePath["valuePath: value"]
```

图表来源
- [ProCheckBox.vue:60-75](file://packages/components/ProCheckBox.vue#L60-L75)

章节来源
- [ProCheckBox.vue:60-158](file://packages/components/ProCheckBox.vue#L60-L158)

### 请求封装与工具
- request.js
  - 支持字符串 URL、对象配置、函数请求三种形态。
  - 自动区分 GET/POST 参数与 data，支持 ${占位符} 替换。
  - 合并 headers，支持全局 $http 或 Axios。
- util.js
  - 模板字符串解析、函数序列化/反序列化、JSON 安全序列化、HTML 标签检测、空值清理。

章节来源
- [request.js:1-78](file://packages/libs/request.js#L1-L78)
- [util.js:1-110](file://packages/libs/util.js#L1-L110)

## 全局映射配置系统

### 设计理念
ProTable 组件新增的全局映射配置系统通过 `$PRO_IVIEW` 全局配置和组件级配置的层级合并机制，实现了数据路径配置的灵活性和可维护性。该系统允许开发者在应用级别统一配置数据映射，同时支持单个组件的个性化定制。

### 层级合并机制
系统采用"组件级配置优先，全局配置兜底"的策略：

```mermaid
graph LR
Global["$PRO_IVIEW.map"] --> Merged["mergedMap 计算属性"]
Component["组件级 map"] --> Merged
Merged --> Current["current: 默认 'current'"]
Merged --> PageSize["pageSize: 默认 'pageSize'"]
Merged --> DataPath["dataPath: 默认 'data'"]
Merged --> TotalPath["totalPath: 默认 'totalRows'"]
Merged --> Message["message: 全局默认 undefined"]
Merged --> Success["success: 全局默认 undefined"]
```

图表来源
- [ProTable.vue:268-291](file://packages/components/ProTable.vue#L268-L291)

### 配置项详解
- **current**：当前页码字段名，默认为 "current"
- **pageSize**：每页条数字段名，默认为 "pageSize"  
- **dataPath**：数据数组路径，默认为 "data"
- **totalPath**：数据总数路径，默认为 "totalRows"
- **message**：消息字段路径，默认为 undefined
- **success**：成功判断字段路径，默认为 undefined

### 应用示例
在应用入口配置全局映射：

```javascript
// src/main.js
app.use(ProComponents, {
  pro_iview: {
    map: { dataPath: "data", totalPath: "totalRows" }
  }
})
```

在组件中覆盖特定配置：

```javascript
// 组件级配置
<pro-table
  :map="{
    dataPath: 'result.data',
    totalPath: 'result.total'
  }"
/>
```

### 实际应用场景
- **API 接口适配**：不同后端接口的数据结构差异
- **多环境配置**：开发、测试、生产环境的不同字段命名
- **第三方服务集成**：适配外部系统的数据格式
- **版本升级兼容**：平滑过渡到新的数据结构

章节来源
- [ProTable.vue:268-291](file://packages/components/ProTable.vue#L268-L291)
- [ProTable.vue:685-741](file://packages/components/ProTable.vue#L685-L741)
- [ProTable.vue:800-814](file://packages/components/ProTable.vue#L800-L814)
- [ProCheckBox.vue:60-75](file://packages/components/ProCheckBox.vue#L60-L75)
- [main.js:16-20](file://src/main.js#L16-L20)

## 依赖关系分析
- 组件导出：index.js 将 ProTable、ProSearch、ProForm、ProTableEdit 等集中导出，便于统一引入。
- 国际化：locale 混入提供 t/$t 方法，贯穿 ProTable、ProSearch、ProForm。
- 请求链路：ProTable -> customRequest -> request.js，统一处理请求形态与参数拼装。
- 列渲染：ProTable 通过 renderTableSelf 与 ProTypeItem 实现列级渲染，支持 children 嵌套。
- **全局映射系统**：ProTable 通过 mergedMap 计算属性实现全局配置与组件配置的层级合并。

```mermaid
graph LR
IDX["index.js"] --> PT["ProTable"]
IDX --> PS["ProSearch"]
IDX --> PF["ProForm"]
IDX --> PTE["ProTableEdit"]
PT --> LOCALE["locale.js"]
PS --> LOCALE
PF --> LOCALE
PT --> REQ["request.js"]
PF --> REQ
PTE --> REQ
PT --> MERGEDMAP["mergedMap 计算属性"]
MERGEDMAP --> GLOBALCONFIG["$PRO_IVIEW.map"]
MERGEDMAP --> COMPONENTCONFIG["组件级 map"]
```

图表来源
- [index.js（组件导出）:1-23](file://packages/components/index.js#L1-L23)
- [ProTable.vue:159-165](file://packages/components/ProTable.vue#L159-L165)
- [ProSearch.vue:116-117](file://packages/components/ProSearch.vue#L116-L117)
- [ProForm.vue:148-151](file://packages/components/ProForm.vue#L148-L151)
- [ProTableEdit.vue:18-29](file://packages/components/ProTableEdit.vue#L18-L29)
- [request.js:1-78](file://packages/libs/request.js#L1-L78)
- [ProTable.vue:268-291](file://packages/components/ProTable.vue#L268-L291)

章节来源
- [index.js（组件导出）:1-23](file://packages/components/index.js#L1-L23)
- [ProTable.vue:159-165](file://packages/components/ProTable.vue#L159-L165)
- [ProSearch.vue:116-117](file://packages/components/ProSearch.vue#L116-L117)
- [ProForm.vue:148-151](file://packages/components/ProForm.vue#L148-L151)
- [ProTableEdit.vue:18-29](file://packages/components/ProTableEdit.vue#L18-L29)
- [request.js:1-78](file://packages/libs/request.js#L1-L78)
- [ProTable.vue:268-291](file://packages/components/ProTable.vue#L268-L291)

## 性能考虑
- 列渲染优化
  - 使用 columnFilter 过滤 notShowXxx 列，减少不必要的渲染。
  - children 嵌套列通过 renderTableSelf 递归注入，避免重复计算。
- 请求与分页
  - 仅在 autoFetch=true 时自动拉取数据；分页变更时重置页码并触发 fetch。
  - format.formatCurrent 支持字符串/函数形式，避免复杂逻辑在模板中执行。
  - **全局映射配置缓存**：mergedMap 计算属性自动缓存合并结果，避免重复计算。
- 表单与校验
  - ProTableEdit 中的校验采用异步 validator，避免阻塞主线程。
  - 错误对象去空值清理，减少 DOM 渲染负担。
- 全屏与样式
  - 全屏切换时动态添加/移除 body 类名，避免样式冲突。
- 大数据量建议
  - 使用虚拟滚动或服务端分页（已具备）。
  - 合理设置 pageSize，避免一次性渲染过多行。
  - 列渲染尽量使用轻量组件，避免深层嵌套与复杂计算。

章节来源
- [ProTable.vue:490-554](file://packages/components/ProTable.vue#L490-L554)
- [ProTable.vue:665-741](file://packages/components/ProTable.vue#L665-L741)
- [ProTableEdit.vue:169-187](file://packages/components/ProTableEdit.vue#L169-L187)
- [util.js:96-110](file://packages/libs/util.js#L96-L110)
- [ProTable.vue:444-454](file://packages/components/ProTable.vue#L444-L454)
- [ProTable.vue:268-291](file://packages/components/ProTable.vue#L268-L291)

## 故障排查指南
- 数据路径与分页配置
  - 若数据为空或 total 为 0，检查 map.dataPath、map.totalPath 是否正确。
  - 若分页字段不生效，检查 format.formatCurrent 与 map.current/pageSize。
  - **全局映射配置问题**：检查 $PRO_IVIEW 全局配置和组件级配置的层级关系。
- 请求失败
  - 检查 request 形态（字符串/对象/函数），确认 headers 与 method。
  - 使用 fetchFinish 事件查看返回结构，定位数据路径。
- 表单校验
  - rules 配置需与字段 key 对应；ProTableEdit 中可通过 validateAll 获取错误集合。
- 搜索异常
  - renderSearch 的 format/wrapper 需确保返回合法值；必要时使用 wapperInput 合并多字段。
- 全屏问题
  - 确认 screenfull 可用且未被浏览器阻止；检查全局类名是否正确添加/移除。
- **全局映射配置调试**
  - 检查 $PRO_IVIEW 配置是否正确挂载到全局对象。
  - 验证组件级 map 配置的优先级是否正确。
  - 使用浏览器开发者工具查看 mergedMap 计算属性的实际值。

章节来源
- [ProTable.vue:699-741](file://packages/components/ProTable.vue#L699-L741)
- [ProTable.vue:782-798](file://packages/components/ProTable.vue#L782-L798)
- [ProSearch.vue:156-158](file://packages/components/ProSearch.vue#L156-L158)
- [ProTableEdit.vue:189-205](file://packages/components/ProTableEdit.vue#L189-L205)
- [ProTable.vue:444-454](file://packages/components/ProTable.vue#L444-L454)
- [ProTable.vue:268-291](file://packages/components/ProTable.vue#L268-L291)

## 结论
ProTable 通过清晰的职责划分与强大的扩展能力，将搜索、表格、分页、表单、编辑等功能有机整合，既满足常规场景，又为复杂业务提供灵活配置。**新增的全局映射配置系统进一步增强了组件的适应性和可维护性**，通过 `$PRO_IVIEW` 全局配置和组件级配置的层级合并机制，实现了数据路径配置的最佳实践。配合 ProSearch、ProForm、ProTableEdit 与 request/util/locale 等基础设施，能够高效构建企业级数据管理界面。

## 附录

### 配置选项速查
- ProTable
  - columns：列定义数组，支持 key、title、width、align、fixed、children、renderTable、renderSearch、renderForm、rules、actions、notShowXxx 等。
  - request/method/headers：请求配置。
  - autoFetch/map/format：自动拉取、**全局映射配置**、分页格式化。
  - hide：{ search, table, page, toolBar } 控制模块显隐。
  - submitForm：新建/编辑提交配置。
  - storage：列设置持久化存储键。
  - attrs：透传给子组件的属性对象（search/form/table/page/modal）。
- ProSearch
  - columns/modelValue：列与双向绑定值。
  - position/searchLineNum/upDown：布局与展开控制。
  - beforeSearch/beforeReset：前置钩子。
- ProForm
  - columns/modelValue：列与双向绑定值。
  - submitForm/type/labelWidth/formLineNum/labelPosition：布局与提交配置。
- ProTableEdit
  - columns/disabled/notShowLeftControls/addDirection/deleteOriginal/controls/autoFetch/editable/addDefaultValue/normalShowEdit/page/shortcuts/save：编辑增强配置。
- **全局映射配置**
  - **$PRO_IVIEW**：应用级别的全局配置对象。
  - **map**：组件级配置对象，支持 dataPath、totalPath、current、pageSize、message、success 等字段。

章节来源
- [ProTable.d.ts:1-59](file://types/ProTable.d.ts#L1-L59)
- [ProTable.vue:195-266](file://packages/components/ProTable.vue#L195-L266)
- [ProSearch.vue:126-151](file://packages/components/ProSearch.vue#L126-L151)
- [ProForm.vue:153-194](file://packages/components/ProForm.vue#L153-L194)
- [ProTableEdit.vue:55-124](file://packages/components/ProTableEdit.vue#L55-L124)
- [ProTable.vue:234-291](file://packages/components/ProTable.vue#L234-L291)
- [main.js:16-20](file://src/main.js#L16-L20)

### 使用示例与模板
- 基础表格与搜索
  - 在页面中引入 ProTable，绑定 config 与 v-model 数据，设置 request、columns、map、search、page、submitForm 等。
  - 示例参考：[ProTable.vue（演示）:20-100](file://src/views/ProTable.vue#L20-L100)
- 自定义渲染
  - 在列定义中使用 renderTable/renderSearch/renderForm，或使用 children 嵌套列。
  - 示例参考：[TableRender.vue（演示）:11-47](file://src/views/TableRender.vue#L11-L47)
- 与 ProSearch/ProForm 集成
  - ProTable 内部组合 ProSearch 与 ProForm，通过事件与属性完成联动。
  - 示例参考：[ProSearch.vue（演示）:1-59](file://src/views/ProSearch.vue#L1-L59)、[ProForm.vue（演示）:1-198](file://src/views/ProForm.vue#L1-L198)
- **全局映射配置示例**
  - 在应用入口配置全局映射：[main.js:16-20](file://src/main.js#L16-L20)
  - 在组件中覆盖配置：[ProTable.vue（演示）:88](file://src/views/ProTable.vue#L88)

章节来源
- [ProTable.vue（演示）:20-100](file://src/views/ProTable.vue#L20-L100)
- [TableRender.vue（演示）:11-47](file://src/views/TableRender.vue#L11-L47)
- [ProSearch.vue（演示）:1-59](file://src/views/ProSearch.vue#L1-L59)
- [ProForm.vue（演示）:1-198](file://src/views/ProForm.vue#L1-L198)
- [main.js:16-20](file://src/main.js#L16-L20)